Qt Quick 教程

最后修改于 2023 年 10 月 18 日

这是一个入门级的 Qt Quick 教程。本教程教授 Qt Quick 编程的基础知识。本教程使用 Qt 5.5.1 编写。

Qt Quick

Qt Quick 是一项现代化的用户界面技术，它将声明式用户界面设计与命令式编程逻辑分离开来。它是 Qt 框架中的一个应用程序框架。它提供了一种构建自定义、高度动态的用户界面的方法，具有流畅的过渡和效果，这在移动设备中越来越常见。

Qt Quick 是一个独立于 Qt Widgets 的模块，Qt Widgets 主要面向传统的桌面应用程序。Qt Quick 基于 QML 声明式语言。

QML

QML 是一种用户界面规范和编程语言。它允许创建流畅动画和视觉上吸引人的应用程序。QML 提供了一种高度可读的、声明式的、类似 JSON 的语法，支持命令式 JavaScript 表达式，并结合动态属性绑定。

QML 由元素层次结构组成。

简单示例

我们从一个简单的示例开始。

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {

    width: 300
    height: 200
    title: "Simple"

    Text {
    
        text: "Qt Quick"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        font.pointSize: 24; font.bold: true
    }
}

代码创建了一个带有居中文本的小窗口。

import QtQuick 2.5
import QtQuick.Controls 1.4

已导入必要的模块。Qt Quick 模块的最新版本与 Qt 版本不同。这些是 Qt 5.5.1 的最新模块。

ApplicationWindow {
...
}

ApplicationWindow 是 Qt Quick 的主应用程序窗口控件。用户界面元素通过它们的类型名称后跟两个花括号指定。

width: 300
height: 200
title: "Simple"

这是 ApplicationWindow 元素的三个内置属性。它们指定窗口的宽度、高度和标题。

Text {

    text: "Qt Quick"
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    font.pointSize: 24
}

Text 控件显示文本；文本通过 text 属性指定。它声明在 ApplicationWindow 元素内，该元素是它的父元素。我们通过 parent 属性引用父元素。anchors 用于将 Text 控件居中放置在应用程序窗口内。最后，font 属性用于设置文本的大小。parent 和 font 是组属性的示例。

使用 qmlscene 工具加载 simple.qml 文档后，我们得到这张图片。

退出按钮

在第二个示例中，我们介绍了 Button 控件。

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {

    width: 300
    height: 200
    title: "Quit button"

    Button {
        x: 20
        y: 20
        text: "Quit"
        onClicked: Qt.quit()
    }
}

窗口上放置了一个按钮。点击该按钮将终止应用程序。

Button {
    x: 20
    y: 20
    text: "Quit"
    onClicked: Qt.quit()
}

Button 控件嵌套在 ApplicationWindow 元素中。它放置在 x=20, y=20 的坐标处；坐标相对于窗口的左上角。text 属性指定按钮的标签。onClicked 是按钮点击信号的处理程序。Qt.quick 函数终止应用程序。

复选框

CheckBox 是一个 Qt Quick 控件，它有两个状态：开和关。复选框通常用于表示应用程序中可以启用或禁用的功能。

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {

    id: rootwin
    width: 300
    height: 200
    title: "CheckBox"
    
    function onChecked(checked) {
    
        if (checked) {
            rootwin.title = "CheckBox"
        } else {
            rootwin.title = " "
        }
    }
    
    CheckBox {
        x: 15
        y: 15
        text: "Show title"
        checked: true
        
        onClicked: rootwin.onChecked(checked)
    }
}

在我们的示例中，我们在窗口上放置了一个复选框。复选框显示或隐藏窗口的标题。

id: rootwin

id 是一个特殊值，用于引用 QML 文档内的元素。id 在文档内必须是唯一的，并且不能将其重置为不同的值，也不能对其进行查询。

function onChecked(checked) {

    if (checked) {
        rootwin.title = "CheckBox"
    } else {
        rootwin.title = " "
    }
}

onChecked 是一个 JavaScript 函数，它设置或删除窗口的标题。为此，我们使用了先前创建的 rootwin id。

CheckBox {
    x: 15
    y: 15
    text: "Show title"
    checked: true
    
    onClicked: rootwin.onChecked(checked)
}

由于标题在应用程序启动时可见，我们使用 checked 属性将 CheckBox 设置为选中状态。onClicked 处理程序调用 onChecked 函数。由于它定义在根窗口的空间中，我们再次使用 rootwin id 来引用它。

滑块

Slider 是一个具有简单手柄的控件。可以前后拖动此手柄，从而为特定任务选择一个值。

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {

    id: rootwin
    width: 300
    height: 200
    title: "Slider"
    
    Row {
        
        Slider {
        
            id: slider
            minimumValue: 0
            maximumValue: 100
        }
        
        Label {

            text: Math.floor(slider.value)
        }            
    }
}

窗口上放置了一个 Slider 和一个 Label 控件。拖动滑块会更新标签。

Row {
...          
}

Row 是一个 QML 类型，它沿着单行排列其子项。

Slider {

    id: slider
    minimumValue: 0
    maximumValue: 100
}

创建了一个 Slider 控件。我们指定了它的最小值和最大值。

Label {

    text: Math.floor(slider.value)
}    

标签的 text 属性绑定到滑块的 value 属性。这称为属性绑定。

NumberAnimation

Qt Quick 中有几种类型的动画。其中之一是 NumberAnimation。NumberAnimation 是用于数值变化的专用属性动画。

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {

    width: 400
    height: 300
    title: "Number animation"

    Rectangle {
        x: 20
        y: 20
        width: 100; height: 100
        color: "forestgreen"

        NumberAnimation on x { to: 250; duration: 1000 }
    }
}

在这个示例中，我们使用 NumberAnimation 来为矩形设置动画；矩形沿 x 轴移动，持续一秒钟。

NumberAnimation on x { to: 250; duration: 1000 }

动画应用于 Rectangle 的 x 属性。to: 属性保存动画的结束值。duration: 属性保存动画的持续时间（以毫秒为单位）。

自定义绘图

可以在 Canvas 元素上执行自定义绘图。

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {

    width: 400
    height: 200
    title: "Shapes"

    Canvas {

        anchors.fill: parent

        onPaint: {

            var ctx = getContext("2d");
            ctx.fillStyle = "lightslategray"

            ctx.beginPath();
            ctx.fillRect(10, 10, 80, 50);
            
            ctx.beginPath();
            ctx.fillRect(120, 10, 70, 70);
            
            ctx.beginPath();
            ctx.ellipse(230, 10, 90, 70);
            ctx.fill();            
   
            ctx.beginPath();
            ctx.ellipse(10, 110, 70, 70);
            ctx.fill();                                     

            ctx.beginPath();
            ctx.roundedRect(120, 110, 70, 70, 10, 10);
            ctx.fill();      
            
            ctx.beginPath();
            ctx.moveTo(230, 110);
            ctx.arc(230, 110, 70, 0, Math.PI * 0.5, false);
            ctx.fill();

        }
    }
}

在示例中，我们在画布上绘制了六种不同的形状：一个矩形、一个正方形、一个椭圆、一个圆形、一个圆角矩形和一个弧形。

Canvas {

    anchors.fill: parent
...
}

Canvas 填充整个父容器。

var ctx = getContext("2d");

我们使用 getContext 函数获取绘图上下文。

ctx.fillStyle = "lightslategray"

形状的内部填充为浅豆灰色。

ctx.beginPath();
ctx.fillRect(10, 10, 80, 50);

beginPath 函数开始一个新路径。fillRect 使用 fillStyle 绘制指定的矩形区域。

在 C++ 中部署 Qt Quick 应用程序

在本节中，我们将展示如何在 C++ 中部署 Qt Quick 应用程序。

QT += qml quick

TARGET = Simple
TEMPLATE = app

SOURCES += main.cpp

这是项目文件。它将 qml 和 quick 模块包含到应用程序中。

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {

    width: 300
    height: 200
    title: "Simple"

    Text {
    
        text: "Qt Quick"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        font.pointSize: 24
    }
}

这是将在 C++ 应用程序中显示的 QML 文档；它包含一个居中文本。

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickWindow>

int main(int argc, char *argv[]) {

    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl("simple.qml"));
    QObject *topLevel = engine.rootObjects().value(0);
    QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
    window->show();
    return app.exec();
}

QQmlApplicationEngine 用于加载 QML 文档。

在 PyQt5 中部署 Qt Quick 应用程序

在本节中，我们将展示如何在 PyQt5 中部署 Qt Quick 应用程序。

$ sudo apt-get install python3-pyqt5
$ sudo apt-get install python3-pyqt5.qtquick
$ sudo apt-get install qtdeclarative5-qtquick2-plugin

在基于 Debian 的 Linux 系统上，我们可以安装上述软件包来开始。

import QtQuick 2.2

Rectangle {
     
    x: 20
    y: 20
    width: 100
    height: 100
    color: "lightsteelblue"
}

这是将在 PyQt5 应用程序中显示的 QML 文档；它包含一个矩形对象。

#!/usr/bin/python3

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
from PyQt5.QtCore import QUrl
from PyQt5.QtQuick import QQuickView
       
    
if __name__ == "__main__":
    
    app = QApplication(sys.argv)
  
    view = QQuickView()
    view.setSource(QUrl('basic.qml'))
    view.show()

    sys.exit(app.exec_())

QQuickView 类提供了一个用于显示 Qt Quick 用户界面的窗口。

以上是 Qt Quick 教程。您可能还对 Qt5 教程 或 PyQt5 教程 感兴趣。