QML入门

First Step with QML

每个QML文件都包含两部分：一个import部分和一个对象声明部分。对用户界面来说，最常用的类型和函数都定义在QtQuick 这个模块里。

编写HelloWorld

先从编程世界起点HelloWorld开始，这里，我们先不建立Qt Project，从最简单的文本文件开始，避免复杂的项目结构带来的困惑。直接新建一个HolloWorld.qml文件，编写如下代码：

import QtQuick

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

代码中，第一行import QtQuick 导入了QtQuick模块，这样，我们就可以用下面的Rectangle和Text等常用的界面组件了。

在上面的代码中，Rectangle部分，我们定义了一个宽200像素，高100像素的红色矩形框，同时，在矩形框中放置了一段Hello, World!文本，该段文本的中心，与矩形框的中心对齐，类似excel单元格的居中对齐。

运行HelloWorld

怎么运行这段代码，如果建立Qt Project直接将这段代码放进Main.qml中能运行吗？很不幸，不能，这样会崩溃。这里我们直接在命令行使用qml命令运行HelloWorld.qml文件就可以。

qml HelloWorld.qml

我们做好的界面长这样：

更进一步，处理用户输入

新建一个ClickableHelloWorld.qml，内容如下：

import QtQuick

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    TapHandler {
        onTapped: parent.color = "blue"
    }
}

同样用qml命令运行此文件，显示的还是上面的红色HelloWorld界面，用鼠标点击之后，界面编程蓝色的，如下图：

代码中，增加了TapHandler对象。QML中，将事件称为signals，将处理信号的对象称为signal handlers。点击时tapped信号会被发射，该信号被onTapped处理，处理结果是将父元素（也就是Rectangle对象）的颜色变为蓝色。这段代码在触屏设备也生效（触屏时间也会发射tapped信号）。

属性绑定

QML文件中，对象及他们的属性组成了最基本的图形界面，QML语言允许属性之间以多种方式相互绑定，先看下面的例子（PropertyBindings.qml）：

import QtQuick

Rectangle {
    width: 400
    height: 200

    Rectangle {
        width: parent.width / 2
        height: parent.height
        color: "blue"
    }

    Rectangle {
        width: parent.width / 2
        height: parent.height
        x: parent.width / 2
        color: "green"
    }
}

这个例子中，每个子矩形的长宽都与父矩形的长宽进行了对应的绑定，如果改变父矩形的尺寸，子矩形的尺寸也会自动跟着改变。类似下面这样：

动画

属性同样可以通过动画（animations）来动态地更新，看下面的例子（Animations.qml）

import QtQuick

Rectangle {
    color: "lightgray"
    width: 200
    height: 200

    property int animatedValue: 0
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1000 }
        PropertyAnimation { to: 0; duration: 1000 }
    }

    Text {
        anchors.centerIn: parent
        text: parent.animatedValue
    }
}

在这个示例中，我们用property定义了一个animatedValue的属性，属性初值为0，然后在使用Animation on Property语句指定将SequentialAnimation动画用于animatedValue属性，SequentialAnimation作用是顺序运行下面指定的两个PropertyAnimation动画，循环次数loops是Animation.Infinite无限循环，第一个PropertyAnimation动画，用1000ms的时间，将animatedValue变为150，第二个PropertyAnimation动画，用1000ms的时间，将animatedValue变为0。Text则将animatedValue显示出来。效果如下：

用于重用的用户自定义QML类型

QML允许用户自定义类型，下面的例子（MessageLabel.qml）展示了一个自定义的MessageLable类型。

import QtQuick

Rectangle {
    height: 50
    property string message: "debug message"
    property var msgType: ["debug", "warning" , "critical"]
    color: "black"

    Column {
        anchors.fill: parent
        padding: 5.0
        spacing: 2
        Text {
            text: msgType.toString().toUpperCase() + ":"
            font.bold: msgType == "critical"
            font.family: "Terminal Regular"
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            ColorAnimation on color {
                running: msgType == "critical"
                from: "red"
                to: "black"
                duration: 1000
                loops: msgType == "critical" ? Animation.Infinite : 1
            }
        }
        Text {
            text: message
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            font.family: "Terminal Regular"
        }
    }

}

这个类型使用Rectangle作为父组件，定义了message和msgType两个属性，Column则将下面的两个Text对象放在同一列中展示，第一个Text对象用于展示msgType，将msgType转化为全大写并加上:，以Terminal Regular字体，显示msgType，如果msgType为critical还会加粗显示，同时，如果msgType为critical或warning，则用红色字体，否则用黄色字体，当msgType为critical时，还会对字体颜色color使用动画，在1000ms内，将字体颜色从红色变为黑色，并且无限循环进行。第二个Text对象则用对应颜色和字体显示message。

使用此类型的代码如下（application.qml）:

import QtQuick

Column {
    width: 180
    height: 180
    padding: 1.5
    topPadding: 10.0
    bottomPadding: 10.0
    spacing: 5

    MessageLabel{
        width: parent.width - 2
        msgType: "debug"
    }
    MessageLabel {
        width: parent.width - 2
        message: "This is a warning!"
        msgType: "warning"
    }
    MessageLabel {
        width: parent.width - 2
        message: "A critical warning!"
        msgType: "critical"
    }
}

运行qml application.qml，效果如下图：

最新文章和代码都放在github QML-Applications上，期待star。