QML入门指南¶

基本的QML应用程序开发示例

创建一个QML文档¶

QML 文档定义了一个具有高度可读性和结构化布局的对象层次结构。每个 QML 文档由两部分组成：导入部分和对象声明部分。用户界面中最常见的类型和功能在 QtQuick 导入中提供。

导入和使用QtQuick模块¶

要使用Qt Quick模块，QML文档需要导入它。导入语法如下所示：

Qt Quick 提供的类型和功能现在可以在 QML 文档中使用了！

定义对象层次结构¶

QML文档中的对象声明定义了将在视觉场景中显示的内容。Qt Quick提供了所有用户界面的基本构建块，例如用于显示图像和文本以及处理用户输入的对象。

一个简单的对象声明可能是一个带有一些居中文本的彩色矩形：

这定义了一个对象层次结构，其中包含一个根Rectangle对象，该对象有一个子Text对象。Text对象的parent自动设置为Rectangle，同样地，Text对象通过QML被添加到Rectangle对象的children属性中。

将所有内容整合在一起¶

上述示例中使用的Rectangle和Text类型均由QtQuick导入提供。将导入和对象声明放在一起，我们得到一个完整的QML文档：

如果我们将该文档保存为“HelloWorld.qml”，我们可以加载并显示它。

创建和运行QML项目¶

要显示由QML文档定义的图形场景，可以使用Qt Creator加载。对于像这样的简单UI文件，请在Qt Creator中选择文件 > 新建文件或项目 > 应用程序 (Qt Quick) > Qt Quick 应用程序 - 空。

按下绿色的运行按钮来运行应用程序。你应该会在红色矩形的中心看到文本Hello, World!。

有关在Qt Creator中创建和运行项目的更多信息，请访问以下页面：

创建Qt Quick项目

构建并运行示例

使用控件创建QML应用程序¶

虽然Qt Quick提供了基本的图形元素，但Qt Quick Controls提供了现成的QML类型供应用程序使用。

插入ApplicationWindow类型是创建应用程序的一个良好起点。应用程序用户界面具有以下基本布局：

在每个区域内，可以添加和连接不同的控件以形成一个应用程序。例如，以下代码片段是一个展示如何使用可用空间的基本应用程序：

应用程序有两个菜单项和一个中间的按钮。点击退出菜单项会关闭应用程序。

还有不同的导航方法和不同的控件，如按钮和滑块。以下示例可从Qt Creator中获得，并展示了不同的控件和布局。

基本布局

Qt Quick Controls - 画廊

请随意复制并粘贴代码片段到这个简单的Hello World应用程序中，以了解QML的工作原理。

处理用户输入¶

使用QML定义用户界面的一个巨大优势是，它允许用户界面设计者通过简单的JavaScript表达式定义应用程序应如何对事件做出反应。在QML中，我们将这些事件称为信号，这些信号由信号处理器处理。

例如，考虑以下示例：

这个例子可以保存为“ClickableHelloWorld.qml”并使用qml运行，即QML Runtime Tool。每当用户点击窗口中的任何位置时，矩形将从红色变为蓝色。

注意

TapHandler 也会为触摸事件发出 tapped 信号，因此此代码也适用于移动设备。

键盘用户输入可以通过一个简单的表达式类似地处理：

通过接受焦点，每当按下回车键时，颜色可以变为蓝色。

属性绑定¶

对象及其属性构成了在QML文档中定义的图形界面的基础。QML语言允许属性以各种方式相互绑定，从而实现高度动态的用户界面。

在以下示例中，每个子矩形的几何形状都绑定到父矩形的几何形状。如果父矩形的几何形状发生变化，由于属性绑定，每个子矩形的几何形状将自动更新。

动画¶

属性也可以通过动画动态更新。QtQuick 导入提供了各种动画类型，可用于对属性值的变化进行动画处理。在以下示例中，一个属性被动画化，然后显示在文本区域中：

显示的值将周期性地从0变化到150。

定义可重用的自定义QML类型¶

QML中最重要的概念之一是类型的重用。一个应用程序可能会有多个相似的视觉类型（例如，多个按钮），QML允许将这些类型定义为可重用的自定义类型，以最小化代码重复并最大化可读性。

例如，想象开发者在MessageLabel.qml文件中定义了一个新的MessageLabel类型：

// MessageLabel.qml
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"
        }
    }

}

该类型现在可以在应用程序中多次重复使用，如下所示：

// 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: "这是一个警告！"
        msgType: "warning"
    }
    MessageLabel {
        width: parent.width - 2
        message: "一个严重警告！"
        msgType: "critical"
    }
}

通过这种方式，模块化的用户界面类型在应用程序中被组装和重用。

有关如何开发自己的可重用组件的更多详细信息，请参见QML对象属性。

接下来去哪里¶

现在你已经看到了QML的实际应用，你已经准备好迈出下一步了。接下来的页面将引导你在QML的旅程中前进。

QML 应用程序

Qt 示例和教程