Back to Qt.io
Contact Us Blog Download Qt
本页内容

教程：Qt Quick 和 Python 教程：Qt Quick 调试

教程：Qt Quick 应用程序

本教程介绍了 Qt Quick。借助Qt Quick 模块，您可以在 QML 中构建流畅的动画用户界面，并将其与后端的 C++ 库连接起来。

Qt Quick 模块提供了使用 QML 创建用户界面所需的所有基本类型。它提供了一个可视化画布，并包含用于创建和动画化可视化组件、接收用户输入等的类型。有关可用 UI 选项的更多信息，请参阅“用户界面”。

本教程介绍了“New Project ”向导生成的示例应用程序。该应用程序从 Qt Quick、Qt Quick Controls 以及Qt Quick Layouts模块中导入 QML 类型。此外，它还会创建一个主 C++ 源文件，用于通过 CMake 构建配置系统来构建和运行该应用程序。

您将使用“编辑”模式来查看项目的 QML 和 C++ 代码以及 CMake 构建配置。随后，您将在 Android 或 iOS 设备上运行该应用程序。

使用“新建项目向导”创建的 <span translate=Qt Quick 应用程序" src="images/qtquick-tutorial.webp" title="使用“新建项目向导”创建的 Qt Quick 应用程序"/>

如需更多示例，请参阅Qt Quick 示例与教程。

设置开发环境

要为移动设备构建应用程序并在其上运行，您必须为该设备平台设置开发环境，并配置Qt Creator 与移动设备之间的连接。

若要开发 Android 设备应用，您必须按照《Android 开发指南》中的说明安装Qt for Android并设置开发环境。

若要开发 iOS 设备应用，您必须安装Qt for iOS。您还需要安装 Xcode 并使用它来配置设备。为此，您需要一个 Apple 开发者账户以及从 Apple 获取的 iOS 开发者计划证书。有关更多信息，请参阅《iOS 开发》。

创建项目

  1. 转至File >New Project >Application (Qt) > Qt Quick Application。

    “新建项目”对话框

  2. 选择“Choose ”以打开“Project Location ”对话框。
  3. 在“Name ”中，输入应用程序的名称。为自己的项目命名时，请注意日后无法轻易重命名。
  4. 在“Create in ”中，输入项目文件的路径。您日后可以毫无问题地移动项目文件夹。
  5. 选择“Next ”以打开“Define Project Details ”对话框。

    “定义项目详细信息”对话框

  6. 选择“Next ”以打开“Kit Selection ”对话框。
  7. 为要构建应用程序的平台选择开发套件。若要构建移动设备应用程序，请同时为 Android 和 iOS 选择开发套件。

    注意：此 列表显示的是您在“Preferences >Kits ”中指定的套件。有关详细信息，请参阅“添加套件”和“管理套件”。

  8. 选择“Next ”以打开“Project Management ”对话框。
  9. 检查项目设置，然后选择“Finish ”（或 macOS 上的“Done ”）以创建项目。

Qt Creator 系统将生成一个组件文件Main.qml ，并在Edit 模式下打开该文件。

预览应用程序

应用程序的主视图中显示了两个带有背景色的矩形、文本和一个按钮。点击该按钮可在浅色模式和深色模式之间切换。

  • 要预览应用程序，请在顶部工具栏中选择“实时预览 ”。
  • 要在桌面上运行应用程序，请选择““运行”按钮 ”。

检查 QML 代码

打开Main.qml 以查看生成的QML代码。

QML 导入

该文件包含应用程序中使用的 Qml 类型的 Qt 模块的导入语句：

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Basics

主窗口

该文件包含一个ApplicationWindow QML 类型的实例，用于创建主窗口。窗口属性设置了初始大小和最小大小，并指定了窗口标题。此外，这些属性还确定了窗口在屏幕上处于可见状态。

ApplicationWindow {
    id: window
    width: 640
    height: 480
    minimumWidth: 200
    minimumHeight: 250
    visible: true
    title: qsTr("Hello World")

    property bool lightMode: Application.styleHints.colorScheme === Qt.Light
    property color reallyDark: "#1f1f1f"
    property color dark: "#262626"
    property color reallyLight: "#e7e7e7"
    property color light: "#e0e0e0"

自定义属性用于设置应用程序在浅色和深色模式下的配色方案。

布局

该窗口包含一个来自Qt Quick 布局模块的GridLayout QML类型的实例，该实例将两个Rectangle类型的实例以网格形式排列。网格属性设置了列宽以及行与列之间的间距，并将网格大小与窗口大小绑定。

GridLayout {
    id: grid
    columns: width < 400 ? 1 : 2
    rowSpacing: 0
    columnSpacing: 0
    anchors.fill: parent

如果在运行中的应用程序中列宽小于 400 像素，则矩形将排列在一列中。

在窄窗口中运行的应用程序

基本 QML 类型

Rectangle 类型的每个实例都具有用于设置类型 ID 和颜色的属性。矩形颜色与当前模式下的窗口颜色相关联。布局属性使矩形适配网格单元格。

Rectangle {
    id: rectangle1
    color: window.lightMode ? window.reallyLight : window.reallyDark
    Layout.fillHeight: true
    Layout.fillWidth: true

这两个矩形都包含一个ColumnLayout ，该控件用于定位来自Qt Quick 控件模块的Label 和Button 类型的实例。

ColumnLayout {
    anchors.fill: parent
    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

“布局”属性将该列对齐到矩形顶部中央，并为布局设置了上下边距，以定位文本和按钮。

更改属性

预览应用程序时，您可以更改代码中的属性值，并立即看到更改效果。

请尝试更改颜色、边距和对齐方式。

Qt Quick 控件

Qt Quick 的“控件”模块提供了一组控件，用于在Qt Quick 中构建完整的用户界面。该应用程序包含Label和Button控件的实例。

Label

Label 的属性用于设置标题文本、颜色以及以像素为单位的尺寸。此外，这些属性还会将标签文本在元素的宽度和高度范围内进行水平和垂直居中，并在列宽发生变化时调整字体大小，以使文本适配标签。

Layout属性可使标签适应网格单元格，并保留16像素的边距。

Label {
    id: text1
    color: window.lightMode ? window.dark : window.light
    font.pixelSize: 120
    fontSizeMode: Text.Fit
    text: qsTr("Hello World")
    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.margins: 16
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

Button

Button 的text 属性会根据窗口模式设置按钮图标和文本。

“布局”属性将按钮对齐到矩形的底部中心，并设置布局的底部边距以定位按钮。

Button {
    id: button1
    text: window.lightMode ? qsTr("\u263D  Dark mode")
                           : qsTr("\u263C  Light mode")

        Layout.bottomMargin: 16
        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
    ...
}

Text 属性将按钮文本及其颜色和字体与窗口模式绑定。

...
contentItem: Text {
    text: button1.text
    color: window.lightMode ? window.light : window.dark
    font: button1.font
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

background 项包含一个 Rectangle 类型的实例。矩形属性会使按钮的角变圆，并根据窗口模式设置按钮的背景颜色。

    ...
    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 36
        radius: 8
        color: window.lightMode ? window.dark : window.light
    }
    ...
}

更改样式

示例应用程序为Qt Quick 控件使用了“Basic”样式。这是一种简单轻量且通用的样式，可提供最佳性能。

您还可以根据目标平台（如 iOS、macOS 或 Android 的 Material 风格）选择其他几种样式。若要尝试不同的样式，请向 `import QtQuick.Controls` 添加样式名称。例如：import QtQuick.Controls.Material 。

从 Qt 6.12 开始，您可以导入QtQuick.Controls.Native ，该文件会自动导入目标平台的默认样式。

有关可用样式的更多信息，请参阅《 Qt Quick 控件的样式设置》。

信号与信号处理程序

Button 类型的onClicked 信号处理程序会响应按钮点击事件。在示例应用程序中，点击该按钮可在浅色模式和深色模式之间切换。

            Button {
                id: button1
                text: window.lightMode ? qsTr("\u263D  Dark mode")
                                       : qsTr("\u263C  Light mode")
                Layout.bottomMargin: 16
                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

                contentItem: Text {
                    text: button1.text
                    color: window.lightMode ? window.light : window.dark
                    font: button1.font
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                background: Rectangle {
                    implicitWidth: 120
                    implicitHeight: 36
                    radius: 8
                    color: window.lightMode ? window.dark : window.light
                }

                onClicked: window.lightMode = !window.lightMode
            }
        }
    }
}

查看 C++ 源代码

打开main.cpp 文件以查看生成的C++代码。该文件声明了应用程序app 以及应用程序引擎engine 。运行应用程序时，引擎会加载主QML文件。

#include <QGuiApplication>
#include <QQmlApplicationEngine>

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

    QQmlApplicationEngine engine;
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    engine.loadFromModule("HelloWorld", "Main");

    return QGuiApplication::exec();
}

查看 CMake 配置文件

向导会生成一个CMakeLists.txt 配置文件，用于构建应用程序。

RESOURCES 部分列出了应用程序的源文件。如果您向项目中添加源文件，Qt Creator 会自动将它们添加到该部分中。

有关更多信息，请参阅“使用 CMake 构建”。

在设备上运行应用程序

现在，您可以将应用程序部署到设备并在设备上运行：

  1. 在 Android 设备上启用USB 调试，或在 iOS 设备上启用开发者模式。
  2. 将设备连接到开发电脑。
  3. 访问Projects ，并为该项目激活相应的开发套件。
  4. 访问Preferences >Kits >Kits ，并在Run device 和Device 中的列表中选择设备。
  5. 要在设备上运行应用程序，请按Ctrl+R。

另请参阅： 为项目激活开发套件、将应用程序部署到 Android、操作指南：使用 CMake 构建、操作指南：设计Qt Quick 用户界面、Qt Quick 用户界面设计、设计Qt Quick 用户界面，以及 Qt Quick 编程入门：闹钟应用程序。

教程：Qt Quick 与Python 教程：Qt Quick 调试

Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.