本教程提供了加载 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
您可以在此处阅读有关此配置文件的更多信息。
您的应用程序的最终外观将是: