QML类型系统

基本类型

QML默认支持一些基本类型，使用它们时不需要import语句。

下面是QML语言提供的基本类型：

❝

小贴士：enum不能单独使用，必须结合其类型一起使用。list只能存储QML对象，而不能包含任何基本类型的值。

❞

另外，QML的QtQuick模块也提供了一些基本类型：

示例如下：

    property int count: 10    property double weight: 100.0    property string placeHolderText: "Hello QML"    property color backgroundColor: "#F7F7F7"    property size defaultSize: Qt.size(150, 50)    property rect defaultRect: Qt.rect(50, 50, 100, 100)    property vector2d defaultVector2d: Qt.vector2d(1,2)

对象类型

QML对象类型用于实例化QML对象。它通过指定类型名称后跟一组包含该对象属性的花括号来声明对象的类型。对象类型名称必须由字母、数字或下划线组成，并且以大写字母开头。使用它们时需要import语句。每个QML文件都隐式定义了一个QML对象类型，该类型可以在其他QML文件中重复使用。

内置对象类型

QML提供了很多内置对象类型，如QtQuick模块中的Rectangle、Text、Image、TextInput等。QtQuick.Controls模块中的Button、Label、CheckBox、Page等。

使用QML文件实现自定义对象类型

可以通过创建QML文件实现自定义QML对象类型。该文件名称同样必须由字母、数字或下划线组成，并且以大写字母开头。如下面创建一个SquareButton.qml文件：

    // SquareButton.qml    import QtQuick 2.0

    Rectangle {        property int side: 100        width: side; height: side        color: "red"

        MouseArea {            anchors.fill: parent            onClicked: console.log("Button clicked!")        }    }

这样就可以在与SquareButton.qml文件同级目录的其他QML文件中使用SquareButton类型。

    // myapplication.qml    import QtQuick 2.0

    SquareButton {}

通过qmlscene命令执行myapplication.qml文件，可以看到运行效果如下：

点击界面后，终端会有响应日志输出。

内联组件

有时，为一个类型创建一个新文件会很不方便。在这种情况下，可以使用内联组件来完成。内联组件是在QML文件中声明一个新组件。语法如下：

    component  : BaseType {// declare properties and bindings here    }

在声明内联组件的文件中，可以直接通过名称引用该类型。

    // Images.qml    import QtQuick 2.15

    Item {        component LabeledImage: Column {            property alias source: image.source            property alias caption: text.text

            Image {                id: image                width: 50                height: 50            }            Text {                id: text                font.bold: true            }        }

        Row {            LabeledImage {                id: before                source: "before.png"                caption: "Before"            }            LabeledImage {                id: after                source: "after.png"                caption: "After"            }        }        property LabeledImage selectedImage: before    }

如果在其他文件中引用该内联组件，则必须在其前面加上组件名称。

    // LabeledImageBox.qml    import QtQuick 2.15

    Rectangle {        property alias caption: image.caption        property alias source: image.source        border.width: 2        border.color: "black"        Images.LabeledImage {            id: image        }    }

❝

小贴士：内联组件不与声明它们的组件共享作用域，并且不可以嵌套使用。

❞

JavaScript类型

QML可以支持JavaScript中的数据类型。如基本类型String、Number、Boolean、Null、Undefined、Symbol等。引用类型Object、Array、Function、Date等。

QML允许使用var或let语句在JavaScript表达式中声明一个变量，如下面的代码在QML中的JavaScript表达式里都是完全正常的：

    var cars = new Array();    cars[0] = "Cat";    cars[1] = "Dog";    cars[2] = "Panda";

    var sum = function (num1, num2) {        return num1 + num2    }    console.log(sum(10, 20))

❝

小贴士：与QML不同，JavaScritp作为一种弱类型语言，它的变量是没有类型的，只有值才具有类型。变量可以随时持有任何类型的值。

❞