12、Python-QML integration

本教程提供了加载 QML 文件并与之交互的 python 应用程序的快速演练。 QML 是一种声明性语言，可让您比 C++ 等传统语言更快地设计 UI。 QtQml 和 QtQuick 模块为基于 QML 的 UI 提供了必要的基础设施。

在本教程中，您将学习如何将 Python 与 QML 应用程序集成。这种机制将帮助我们了解如何使用 Python 作为来自 QML 界面中 UI 元素的某些信号的后端。此外，您将学习如何使用 Qt Quick Controls 2 中的一项功能为您的 QML 应用程序提供现代外观。

本教程基于一个允许您设置许多文本属性的应用程序，例如增加字体大小、更改颜色、更改样式等。在开始之前，请安装 PySide6 Python 包。

以下分步过程将指导您完成基于 QML 的应用程序和 PySide6 集成的关键元素：

1、首先，让我们从以下基于 QML 的 UI 开始：

 该设计基于一个GridLayout，包含两个ColumnLayout。在 UI 中，您会发现许多 RadioButton、Button 和 Slider。

2、有了 QML 文件，您可以从 Python 加载它：

 1
 2if __name__ == '__main__':
 3    app = QGuiApplication(sys.argv)

 4    QQuickStyle.setStyle("Material")

 5    engine = QQmlApplicationEngine()
 6
 7    # Get the path of the current directory, and then add the name
 8    # of the QML file, to load it.

 9    qml_file = Path(__file__).parent / 'view.qml'

10    engine.load(qml_file)
11
12    if not engine.rootObjects():
13        sys.exit(-1)
14

请注意，我们只需要一个 QQmlApplicationEngine 来加载 QML 文件。

3、定义 Bridge 类，包含将在 QML 中注册的元素的所有逻辑：

 1# To be used on the @QmlElement decorator
 2# (QML_IMPORT_MINOR_VERSION is optional)

 3QML_IMPORT_NAME = "io.qt.textproperties"

 4QML_IMPORT_MAJOR_VERSION = 1

 5
 6

 7@QmlElement

 8class Bridge(QObject):
 9
10    @Slot(str, result=str)
11    def getColor(self, s):
12        if s.lower() == "red":
13            return "#ef9a9a"
14        elif s.lower() == "green":
15            return "#a5d6a7"
16        elif s.lower() == "blue":
17            return "#90caf9"
18        else:
19            return "white"
20
21    @Slot(float, result=int)
22    def getSize(self, s):
23        size = int(s * 34)
24        if size <= 0:
25            return 1
26        else:
27            return size
28
29    @Slot(str, result=bool)
30    def getItalic(self, s):
31        if s.lower() == "italic":
32            return True
33        else:
34            return False
35
36    @Slot(str, result=bool)
37    def getBold(self, s):
38        if s.lower() == "bold":
39            return True
40        else:
41            return False

请注意，由于 QmlElement 装饰器，注册发生，它在下面使用对 Bridge 类的引用以及变量 QML_IMPORT_NAME 和 QML_IMPORT_MAJOR_VERSION。

4、现在，回到 QML 文件并将信号连接到 Bridge 类中定义的插槽：

Bridge {
   id: bridge
}

在 ApplicationWindow 中，我们声明一个与 Python 类同名的组件，并提供一个 id:。此 id 将帮助您获取对从 Python 注册的元素的引用。

 1            RadioButton {
 2                id: italic
 3                Layout.alignment: Qt.AlignLeft
 4                text: "Italic"
 5                onToggled: {

 6                    leftlabel.font.italic = bridge.getItalic(italic.text)

 7                    leftlabel.font.bold = bridge.getBold(italic.text)

 8                    leftlabel.font.underline = bridge.getUnderline(italic.text)

 9
10                }
11            }

斜体、粗体和下划线属性是互斥的，这意味着任何时候都只能激活一个。为了在每次选择其中一个选项时实现这一点，我们通过 QML 元素属性检查三个属性，如您在上面的代码片段中所见。这三个中只有一个会返回 True，而另外两个会返回 False，这就是我们确保只有一个应用于文本的方式。

5、每个插槽都会验证所选选项是否包含与属性关联的文本：

1    @Slot(str, result=bool)
2    def getItalic(self, s):
3        if s.lower() == "italic":

4            return True

5        else:

6            return False

返回 True 或 False 允许您激活和停用 QML UI 元素的属性。

也可以返回其他非布尔值，例如负责返回字体大小的槽：

6、现在，为了改变我们的应用程序的外观，您有两个选择：

        1、 使用命令行：执行添加选项--style的python文件：

python main.py --style material

        2、使用 qtquickcontrols2.conf 文件：

 1[Controls]
 2Style=Material
 3
 4[Universal]
 5Theme=System
 6Accent=Red
 7
 8[Material]
 9Theme=Dark
10Accent=Red

        然后将其添加到您的 .qrc 文件中：

1<!DOCTYPE RCC><RCC version="1.0">
2<qresource prefix="/">
3    <file>qtquickcontrols2.conf</file>
4</qresource>
5</RCC>

运行生成rc文件，pyside6-rcc style.qrc > style_rc.py 最后从你的main.py脚本中导入。

1import sys
2from pathlib import Path
3
4from PySide6.QtCore import QObject, Slot
5from PySide6.QtGui import QGuiApplication
6from PySide6.QtQml import QQmlApplicationEngine, QmlElement
7from PySide6.QtQuickControls2 import QQuickStyle
8

9import style_rc

您可以在此处阅读有关此配置文件的更多信息。

您的应用程序的最终外观将是：