开始 QML 的第一步

以下内容为本人的学习笔记，如需要转载，请声明原文链接 微信公众号「englyf」https://www.jianshu.com/p/4028c6808a10

---

创建一个 QML 文件

QML 文档内部定义了高可读和结构化的对象层次系统。 每个 QML 文档都由两部分组成：导入部分和对象声明部分。通过导入 QtQuick，可以使用到用户界面开发过程中最常用的类型和功能。

导入和使用 QtQuick 模块

QML 文档在使用 Qt Quick 前必须要先导入它。导入的语法看下面：

import QtQuick 2.3

从这里开始，由 Qt Quick 提供的类型和功能都可以在 QML 文档里直接引用了。

定义一个对象层次结构系统

在 QML 文档中声明的对象定义了会被显示到可视场景的内容。Qt Quick 为所有的用户界面提供了基础的构建模块，比如显示图片、文字和处理用户输入的对象，就像盖房子必须要用到的砖头、柱子等等。
下面演示一个简单的对象声明，显示出来就是：由绿色的矩形包含着一些字符串在中间，非常经典的问候「Hello, World!」

Rectangle {
    width: 300
    height: 200
    color: "green"

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

上面的代码中定义了一组对象层次结构，有一个根对象 Rectangle 和里面的一个子对象 Text。对象 Text 的父母会被自动设置成根对象 Rectangle，很明显，对象 Text 会被 QML 添加到对象 Rectangle 的属性 children 中。

完整的一个 QML 文档

上面用到的 Rectangle 和 Text 都是要由 QtQuick 导入才能使用。像下面这样才可以成为一个完整的 QML 文档：

import QtQuick 2.3

Rectangle {
    width: 300
    height: 200
    color: "green"

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

然后保存这个文档为「HelloWorld.qml」，稍后我们就可以加载和显示它了。

创建 QML 工程，然后跑起来！

可以使用 Qt Creator 加载显示 QML 文档定义的图形场景。对于像上面定义的这种简单 UI 文件，可以在 Qt Creator 中选择 File > New File or Project > Applications > Qt Quick UI得到。
点击绿色高亮的按钮 Run 运行应用。你会看到字符串「Hello, World!」显示在绿色的矩形中间。
如果你想知道更多关于在 Qt Creator 中创建和运行工程的信息，下面的链接里有你需要的：

• 怎么创建 Qt Quick 工程 ？
• Building and Running an Example

使用控件创建 QML 应用

虽然 Qt Quick 为我们提供了基础的图形元素，但是也可以在应用中使用 Qt Quick Controls 提供的现成 QML 控件类型，这样更快捷更方便，大大加速开发过程。
为了快速构建一个 QML 可视化应用，可以插入一个 ApplicationWindow 类型。一个 QML 界面有以下图所示的布局：

为了搭建一个应用，可以在上图所示的各个区域中添加和连接不同的控件。下面就利用上面的搭建的布局写一个基本的应用：

// 导入相关的模块
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

//包含应用的窗口
ApplicationWindow {

    //title of the application
    title: qsTr("Hello World")
    width: 640
    height: 480

    //包含两个菜单项的菜单
    menuBar: MenuBar {
        Menu {
            title: qsTr("文件")
            MenuItem {
                text: qsTr("&O打开")
                onTriggered: console.log("触发打开");
            }
            MenuItem {
                text: qsTr("退出")
                onTriggered: Qt.quit();
            }
        }
    }

    //Content Area

    //按钮，在 Content Area 的中间
    Button {
        text: qsTr("Hello World")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}

点击 Run 运行工程可以看到有两个菜单和一个在中间的按钮。点击「退出」菜单可以关闭应用，如下图所示

当然，也有一些不同的导航方法和控件，例如按键和滑块可供使用。下面的两个例子可以从 Qt Creator 获得，里面演示了使用更多的控件和布局，有兴趣的可以看看：

• Basic Layouts
• Touch Gallery
  你可以将上面链接里提到的代码片段复制并粘贴到 hello world 的例子中，看看 QML 的怎么使用。

处理用户的输入

使用 QML 来定义用户界面的其中一个巨大的优势就是，允许界面设计者使用简单的 JavaScript 表达式来定义应用如何处理事件。在 QML 里，我们把事件叫做 信号，而且这些信号由 信号处理程序 处理。

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

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

    MouseArea {
        anchors.fill: parent
        onClicked: parent.color = "blue"
    }
}

把上面这段代码保存到文件「ClickableHelloWorld.qml」中，然后点击 Run 运行 qmlscene，界面会运行起来。当点击窗口的任何地方，矩形会从红色变成蓝色。因为 MouseArea 对触摸事件也会发送 clicked 信号，所以上面这段功能对移动设备也有效。
对于键盘输入，我们也可以用一段简单的表达式来处理：

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

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

    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Return) {
            color = "blue";
            event.accepted = true;
        }
    }
}

关于上面这段代码，可以看到接收到焦点后，当 return 键被按下时，窗口的颜色也会改变。

属性绑定

对象和它们的属性是 QML 文档中定义的图形界面的组成基础。QML 语言允许以各种方式让属性相互关联，实现了高度动态的用户界面。
下面的例子中，各个子矩形的几何大小都被关联（绑定）到了父矩形的几何大小。由于属性的绑定关系，所以当父矩形的几何大小改变之后，各个子矩形的几何大小也会自动被更新。

Rectangle {
    width: 450
    height: 200

    Rectangle {
        width: parent.width / 2
        height: parent.height
    }

    Rectangle {
        width: parent.width / 2
        height: parent.height
        x: parent.width / 2
    }
}

动画

属性也可以通过动画来动态更新。可以使用 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
    }
}

运行工程后可以看到，显示的数值会定期循环从0到150，再从150到0地变化。

自定义可重用的 QML 类型

其实 QML 最重要的概念就是类型可重用。一个应用可能包含了多个类似的可视化类型，例如多个按钮等，所以 QML 为了最小化代码拷贝和最大化代码可读性，允许对这些类型进行可重用的定制化。
下面看看例子，假如我们定义了一个新的 Button 类型，并且保存为文件 Button.qml:

// Button.qml
import QtQuick 2.3

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

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

现在上面定义了的 Button 类型就可以多次重复使用了，看一下示例：

// application.qml
import QtQuick 2.3

Column {
    Button { width: 50; height: 50 }
    Button { x: 50; width: 100; height: 50; color: "blue" }
    Button { width: 50; height: 50; radius: 8 }
}

通过上面的示例，可以看到在应用程序中可以组装和重复调用自定义的类型。
这里要注意一下，上面并没有看到显式的导入 Button 类型，因为只要调用和定义在同一路径下就不需要显式的导入。

关于怎么编写自己的可重用组件还有很多的细节和要注意的地方，更多的内容请点击这里 QML 对象的属性。

接下来可以做什么

看完上面的内容，相信已经对 QML 有一定的印象了，但了解得还是很浅，怎么能就这样止步不前？所以请继续大踏步向前吧：

• QML 应用开发介绍
• Qt Examples and Tutorials

---

参考英文资料[Qt]https://doc.qt.io/qt-5/qmlfirststeps.html