11、Your First QtQuick/QML Application

QML 是一种声明性语言，可让您比使用传统语言更快地开发应用程序。由于其声明性，它非常适合设计应用程序的 UI。在 QML 中，用户界面被指定为具有属性的对象树。在本教程中，我们将展示如何使用 PySide6 和 QML 制作一个简单的“Hello World”应用程序。

PySide6/QML 应用程序至少包含两个不同的文件——一个包含用户界面 QML 描述的文件，以及一个加载 QML 文件的 python 文件。为了方便起见，让我们将这两个文件保存在同一个目录中。

这是一个名为 view.qml 的简单 QML 文件：

import QtQuick

Rectangle {
    id: main
    width: 200
    height: 200
    color: "green"

    Text {
        text: "Hello World"
        anchors.centerIn: main
    }
}

我们首先导入 QtQuick，它是一个 QML 模块。

对于以前使用过 HTML 或 XML 文件的人来说，其余的 QML 代码非常简单。基本上，我们正在创建一个大小为 200*200 的绿色矩形，并添加一个文本元素，内容为“Hello World”。代码 anchors.centerIn:main 使文本在 id:main 的对象中居中显示，在本例中为 Rectangle。

现在，让我们看看代码在 PySide6 上的样子。我们称之为 main.py：

import sys
from PySide6.QtWidgets import QApplication
from PySide6.QtQuick import QQuickView

if __name__ == "__main__":
    app = QApplication()
    view = QQuickView()

    view.setSource("view.qml")
    view.show()
    sys.exit(app.exec())

如果您已经熟悉 PySide6 并按照我们的教程进行操作，那么您已经看过大部分代码。唯一的新奇之处在于您必须导入 QtQuick 并将 QQuickView 对象的源设置为您的 QML 文件的 URL。然后，与您对任何 Qt 小部件所做的类似，您调用 QQuickView.show()。

如果您正在为桌面编程，您应该考虑在显示视图之前添加 view.setResizeMode(QQuickView.SizeRootObjectToView)。

当您执行 main.py 脚本时，您将看到以下应用程序：