QML 语言基础----（Qt Quick 教程二）

对象

   QML 文件的后缀是 qml ，其实就是个文本文件。下面是 一个简单的 QML 文件：

import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Dialogs 1.1
import an.qt.ImageProcessor 1.0
import QtQuick.Controls.Styles 1.1
 
Rectangle {
    width: 320;
    height: 480;
    color: "#121212";
    
    Image {
        source: "images/IMG_001.jpg";
        anchors.centerIn: parent;
    }
}

Rectangle{ } 语句，定义了一个类型为 Rectangle 的对象。如果你看了《Qt on Android: http下载与Json解析》一文中有关 Json 的语法描述，应该已经知道对象要用一对花括号来描述。没错， QML 里也是这样，不过呢，花括号前要写上对象的类型。就这么简单！

    示例 QML 文档中有两个对象，一个是 Rectangle ，一个是 Image 。

    在花括号之间，是对象的属性描述（还可以有其它的，后面再说），属性是以 "property: value" 形式指定的，这点和 Json 一样。如你所见， Rectangle 对象有 width 、 color 等属性。
 

表达式

Button {
    text: "Quit";
    style: ButtonStyle {
        background: Rectangle {
            implicitWidth: 70;
            implicitHeight: 25;
            border.width: control.activeFocus ? 2 : 1;
        }
    }
}

另外，慧眼如你，可能已经注意到，上面的表达式中我使用了 "control.activeFocus" ，没错，在表达式中可以引用其它对象及其属性。当你这么做的时候，待赋值的属性就和你所引用的对象的那个属性建立了关联，当被引用属性发生变化时，表达式的值会重新计算，而待赋值的属性也会变化。

    也许你心中已经有了疑问：如何引用一个对象呢？答案是：通过对象的 id 值来引用一个对象。看这里：
 

Rectangle {
    width: 320;
    height: 480;
    
    Button {
        id: openFile;
        text: "打开";
        anchors.left:  parent.left;
        anchors.leftMargin: 6;
        anchors.top: parent.top;
        anchors.topMargin: 6;
    }
 
    Button {
        id: quit;
        text: "退出";
        anchors.left: openFile.right;
        anchors.leftMargin: 4;
        anchors.bottom: openFile.bottom;
    }
}

属性类型

    可以在 QML 文档中使用的类型大概有三类：

• 由 QML 语言本身提供的类型
• 使用 QML 模块注册 C++ 类型
• 由 QML 模块提供的类型

 我们先看 QML 语言提供的基本类型。

  基本类型

    QML 支持的基本类型包括整型、实数型、布尔、字符串、颜色、列表等等。这些基本类型有些是和 JavaScript 语言的基本类型对应的。

    还是之前的示例，修改了一下，通过注释标注了属性类型：

Rectangle {
    width: 320; //int 
    height: 480;
    
    Button {
        id: quit;
        text: "退出"; //string
        anchors.left: openFile.right;
        anchors.leftMargin: 4;
        anchors.bottom: openFile.bottom;
        z: 1.5; // real
        visible: false; //bool
    }
}

    注意， QML 中属性是有类型安全检测的，也就是说你只能指定与属性类型匹配的值，否则会报错。
    请使用 Qt 助手的索引模式，以"qml basic types " 为关键字检索，找到 QML Basic Types 页面来查看完整的类型列表和每个类型的详情。

    Qt 的 QML 模块还未 QML 引入的很多 Qt 相关的类型，如 Qt 、 QtObject 、Component 、 Connections 、 Binding 等，请使用 Qt 助手检索 "qt qml qml types" 来了解。
 

id 属性
    之前在介绍表达式时提到了 id 属性，这里展开描述一下。

    一个对象的 id 属性是唯一的，在同一个 QML 文件中不同对象的 id 属性的值不能重复。当给一个对象指定了 id ，就可以在其它对象或脚本中通过 id 来引用该对象。在“表达式”一节中我们已经演示了如何通过 id 来引用一个对象。

    请注意， id 属性的值，首字符必须是小写字母或下划线并且不能包含字母、数字、下划线以外的字符。

列表属性

Item {
    children:[
        Text{
            text: "textOne";
        },
        Text{
            text: "textTwo";
        }
    ]
    Component.onCompleted:{        
        for (var i = 0; i < children.length; i++)
            console.log("text of label ", i, " : ", children[i].text)
    }
}

信号处理器

信号处理器，它的名字还有点儿特别，一般是 on{Signal} 这种形式。比如 Qt Quick 中的 Button 元素有一个信号 clicked() ，那么你要可能会写出这样的代码：

Rectangle {
    width: 320;
    height: 480;
    
    Button {
        id: quit;
        text: "退出";
        anchors.left: parent.left;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        onClicked: {
            Qt.quit();
        }
    }
}

分组属性

分组属性可以写成一下两种形式

Text {
    font.pixelSize: 18;
    font.bold: true;
}

Text {
    font { pixelSize: 12; bold: true; }
}

附加属性

在 QML 语言的语法中，有一个附加属性（attached properties）和附加信号处理器（attached signal handlers）的概念，这是附加到一个对象上的额外的属性。从本质上讲，这些属性是由附加类型（attaching type）来实现和提供的，它们可能被附加到另一种类型的对象上。附加属性与普通属性的区别在于，对象的普通属性是由对象本身或其基类（或沿继承层级向上追溯的祖先们）提供的。

   举个例子，下面的 Item 对象使用了附加属性和附加信号处理器：
 

import QtQuick 2.0
 
Item {
    width: 100; 
    height: 100;
 
    focus: true;
    Keys.enabled: false;
    Keys.onReturnPressed: console.log("Return key was pressed");
}

  你看， Item 对象可以访问和设置 Keys.enabled 和 Keys.onReturnPressed 的值。 enabled 是 Keys 对象的一个属性。 onReturnPressed 其实是 Keys 对象的一个信号。对于附加信号处理器，和前面讲到的普通信号处理器又有所不同。普通信号处理器，你先要知道信号名字，然后按照 on{Signal} 的语法来定义信号处理器的名字；而附加信号处理器，你只要通过附加类型名字引用它，把代码块赋值给它即可。
    最后说下 Keys 对象，它是 Qt Quick 提供的，专门供 Item 处理按键事件的对象。它定义了很多针对特定按键的信号，比如上面的 onReturnPressed ，还定义了更为普通的 onPressed 和 onReleased 信号，一般地，你可以使用这两个信号来处理按键（请对照 Qt C++ 中的 keyPressEvent 和 keyReleaseEvent 来理解）。它们有一个名字是 event 的 KeyEvent 参数，包含了按键的详细信息。如果一个按键被处理， event.accepted 应该被设置为 true 以免它被继续传递。