Qt 6.x中Qt Quick简介及示例

Posted 2023-02-02 fengbingchun

      Qt Quick首次在Qt 4.7和Qt Creator 2.1中引入，是一种高级UI技术。
      Qt Quick模块是用于编写QML(Qt Meta-Object Language, Qt元对象语言)应用程序的标准库。Qt QML模块提供了QML引擎(engine)和语言基础设施，而Qt Quick模块提供了使用QML创建用户界面所需的所有基本类型。它提供了一个可视画布(visual canvas)，包括用于创建和动画可视组件、接收用户输入、创建数据模型和视图以及延迟对象实例化的类型。
      Qt Quick是QML类型和功能的标准库。它包括视觉类型，交互类型，动画，模型和视图，粒子效果和着色器效果。QML应用程序开发人员可以通过一个import语句访问所有这些功能。
      Qt Quick模块既提供了一个QML API(使用QML语言创建用户界面的QML类型)，也提供了一个C++ API(用于使用C++代码扩展QML应用程序):
      (1).QML API:模块的QML类型可通过QtQuick导入获得。若要使用这些类型，需在.qml文件中添加import语句：import QtQuick
      (2).C++ API:使用Qt模块需要直接或通过其它依赖项链接到模块库。一些构建工具对此提供了专门的支持，包括CMake和qmake。
      QML是一种声明式语言(QML is a declarative language)，它允许根据用户界面的可视组件以及它们如何相互交互和关联来描述用户界面。它是一种高度可读的语言，旨在使组件能够以动态方式互连，并允许在用户界面中轻松重用和自定义组件。使用QtQuick模块，设计人员和开发人员可以轻松地在QML中构建流畅的动画用户界面，并可以选择将这些用户界面连接到任何后端C++库。
      QML文档(QML Document)定义了具有高度可读的结构化布局的对象层次结构。每个QML文档都由两部分组成：导入部分和对象声明部分。用户界面最常见的类型和功能在QtQuick导入中提供。文档中的导入部分包含导入语句，这些语句定义文档可以使用哪些QML对象类型和javascript资源。对象声明部分定义在实例化文档定义的对象类型时要创建的对象树。
      QML文档中的对象声明(object declaration)定义了将在视觉场景中显示的内容。Qt Quick为所有用户界面提供了基本的构建块，例如用于显示图像和文本以及处理用户输入的对象。
      QML文档是符合QML文档语法的字符串(A QML document is a string which conforms to QML document syntax)。文档定义QML对象类型。文档通常从本地或远程存储的".qml"文件加载，但可以在代码中手动构造。文档定义的对象类型的实例可以使用QML代码中的组件(Component)或C++中的QQmlComponent来创建。或者，如果对象类型显式公开给具有特定类型名称的QML类型系统，则该类型可以直接在其它文档的对象声明中使用。
      在文档中定义可重用的QML对象类型的能力是允许客户端编写模块化、高度可读和可维护代码的重要推动因素。
      从Qt 5.4开始，文档也可以具有文件扩展名".ui.qml"。QML引擎像处理标准.qml文件一样处理这些文件，并忽略扩展名的.ui部分。Qt Design Studio将这些文件作为UI文件处理。这些文件只能包含QML语言功能的子集。

      注：以上内容来自于网络整理

      以下为测试代码：通过vs2022创建的Qt Quick Application项目

     main.qml:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs

Window 
    visible: true
    width: 640
    height: 480
    title: qsTr("Qt Quick Test")

    Image  // 背景色
        id: image_backgroud
        width: 640; height: 480
        focus: true
        //fillMode: Image.PreserveAspectFit
        source: "test.jpg"
        anchors.centerIn:parent
    

    Button  // 关闭窗口按钮
        id: button_close
        // 此按钮的起始点坐标
        x: 580; y: 420
        text: "Close"
        highlighted: true
        flat: true
        onClicked: Qt.exit(0) // 槽函数
    

    MessageDialog  // csdn对话框
        id: dialog_csdn
        title: qsTr("csdn address")
        text: qsTr("https://blog.csdn.net/fengbingchun/")
        buttons: MessageDialog.Ok | MessageDialog.Cancel
    

    Button  // 单击弹出csdn对话框
        id: button_csdn_address
        x: 20; y: 20
        text: "csdn address"
        highlighted: true
        flat: true
        onClicked: dialog_csdn.open()
    

    MessageDialog 
        id: dialog_github
        title: qsTr("github address")
        text: qsTr("https://github.com/fengbingchun")
        buttons: MessageDialog.Ok | MessageDialog.Cancel
    

    Button 
        id: button_github_address
        x: 120; y: 20
        text: "github address"
        highlighted: true
        flat: true
        onClicked: dialog_github.open()
    

      main.cpp:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <iostream>

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

#if defined(Q_OS_WIN)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    fprintf(stdout, "test finish\\n");
    return app.exec();

      qml.qrc:

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>test.jpg</file>
    </qresource>
</RCC>

      执行结果如下图所示：点击csdn address按钮，会弹出对话框，显示csdn地址；点击github address按钮，会弹出对话框，显示github地址；点击右下角的Close按钮，关闭应用程序

      GitHub：https://github.com/fengbingchun/Qt_Test