你的第一个QtQuick/QML应用程序

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

一个PySide6/QML应用程序主要由两个不同的文件组成 - 一个包含用户界面的QML描述的文件,以及一个加载QML文件的python文件。

这里是一个名为 Main.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的对象内居中显示,在这种情况下,该对象是矩形。

将文件放入名为 App 的目录中,同时放入一个名为 qmldir 的文件来描述一个基本的 QML 模块:

module App
Main 254.0 Main.qml

现在,让我们看看代码在PySide6上的样子。 我们称它为main.py

import sys
from PySide6.QtGui import QGuiApplication
from PySide6.QtQuick import QQuickView

if __name__ == "__main__":
    app = QGuiApplication()
    view = QQuickView()
    view.engine().addImportPath(sys.path[0])
    view.loadFromModule("App", "Main")
    view.show()
    ex = app.exec()
    del view
    sys.exit(ex)

如果你已经熟悉PySide6并跟随了我们的教程,你已经见过大部分这段代码。唯一的新颖之处在于你必须import QtQuick,将目录添加到导入路径中,并指示QQuickView加载我们的模块。然后,类似于你对任何Qt小部件的操作,你调用QQuickView.show()

注意

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

当你执行main.py脚本时,你将看到以下应用程序:

Simple QML and Python example