13、QML Application Tutorial

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

在本教程中，您还将学习如何从 Python 提供数据作为 QML 初始属性，然后由 QML 文件中定义的 ListView 使用。

在开始之前，请安装以下先决条件：

PySide6 Python 包。

来自 https://download.qt.io 的 Qt Creator v4.9 beta1 或更高版本。

以下分步说明指导您使用 Qt Creator 完成应用程序开发过程：

1、打开 Qt Creator 并选择 File > New File or Project.. 菜单项以打开以下对话框：

 2、从应用程序模板列表中选择 Qt for Python - Empty，然后选择选择。

3、为您的项目命名，选择其在文件系统中的位置，然后选择 Finish 创建一个空的 main.py 和 main.pyproject。

 这应该为项目创建一个 main.py 和 `main.pyproject 文件。

4、下载 view.qml 和 logo.png 并将它们移动到您的项目文件夹中。

5、双击 main.pyproject 以编辑模式打开它，并将 view.qml 和 logo.png 附加到文件列表中。这是您的项目文件在此更改后的外观：

{
    "files": ["main.py", "view.qml", "logo.png"]
}

6、现在您已经拥有了应用程序所需的位，在 main.py 中导入 Python 模块，并下载国家数据并对其进行格式化：

 1
 2import sys
 3import urllib.request
 4import json
 5from pathlib import Path
 6

 7from PySide6.QtQuick import QQuickView

 8from PySide6.QtCore import QStringListModel, QUrl

 9from PySide6.QtGui import QGuiApplication

10
11
12if __name__ == '__main__':
13

14    #get our data

15    url = "http://country.io/names.json"

16    response = urllib.request.urlopen(url)

17    data = json.loads(response.read().decode('utf-8'))

18
19    #Format and sort the data
20    data_list = list(data.values())
21    data_list.sort()

7、现在，使用 PySide6.QtGui.QGuiApplication 设置应用程序窗口，它管理应用程序范围的设置。

 1
 2import sys
 3import urllib.request
 4import json
 5from pathlib import Path
 6
 7from PySide6.QtQuick import QQuickView
 8from PySide6.QtCore import QStringListModel, QUrl
 9from PySide6.QtGui import QGuiApplication
10
11
12if __name__ == '__main__':
13
14    #get our data
15    url = "http://country.io/names.json"
16    response = urllib.request.urlopen(url)
17    data = json.loads(response.read().decode('utf-8'))
18
19    #Format and sort the data
20    data_list = list(data.values())
21    data_list.sort()
22

23    #Set up the application window

24    app = QGuiApplication(sys.argv)

25    view = QQuickView()

26    view.setResizeMode(QQuickView.SizeRootObjectToView)

如果您希望根项目调整自身大小以适应窗口，则设置调整大小策略很重要，反之亦然。否则，根项目将在调整窗口大小时保持其原始大小。

8、您现在可以将 data_list 变量公开为 QML 初始属性，该属性将由 view.qml 中的 QML ListView 项使用。

 1
 2import sys
 3import urllib.request
 4import json
 5from pathlib import Path
 6
 7from PySide6.QtQuick import QQuickView
 8from PySide6.QtCore import QStringListModel, QUrl
 9from PySide6.QtGui import QGuiApplication
10
11
12if __name__ == '__main__':
13
14    #get our data
15    url = "http://country.io/names.json"
16    response = urllib.request.urlopen(url)
17    data = json.loads(response.read().decode('utf-8'))
18
19    #Format and sort the data
20    data_list = list(data.values())
21    data_list.sort()
22
23    #Set up the application window
24    app = QGuiApplication(sys.argv)
25    view = QQuickView()
26    view.setResizeMode(QQuickView.SizeRootObjectToView)
27

28    #Expose the list to the Qml code

29    my_model = QStringListModel()

30    my_model.setStringList(data_list)

31    view.setInitialProperties({"myModel": my_model})

9、将 view.qml 加载到 QQuickView 并调用 show() 以显示应用程序窗口。

 1
 2import sys
 3import urllib.request
 4import json
 5from pathlib import Path
 6
 7from PySide6.QtQuick import QQuickView
 8from PySide6.QtCore import QStringListModel, QUrl
 9from PySide6.QtGui import QGuiApplication
10
11
12if __name__ == '__main__':
13
14    #get our data
15    url = "http://country.io/names.json"
16    response = urllib.request.urlopen(url)
17    data = json.loads(response.read().decode('utf-8'))
18
19    #Format and sort the data
20    data_list = list(data.values())
21    data_list.sort()
22
23    #Set up the application window
24    app = QGuiApplication(sys.argv)
25    view = QQuickView()
26    view.setResizeMode(QQuickView.SizeRootObjectToView)
27
28    #Expose the list to the Qml code
29    my_model = QStringListModel()
30    my_model.setStringList(data_list)
31    view.setInitialProperties({"myModel": my_model})
32

33    #Load the QML file

34    qml_file = Path(__file__).parent / "view.qml"

35    view.setSource(QUrl.fromLocalFile(qml_file.resolve()))

36

37    #Show the window

38    if view.status() == QQuickView.Error:

39        sys.exit(-1)

40    view.show()

10、最后，执行应用程序以启动事件循环并进行清理。

 1
 2import sys
 3import urllib.request
 4import json
 5from pathlib import Path
 6
 7from PySide6.QtQuick import QQuickView
 8from PySide6.QtCore import QStringListModel, QUrl
 9from PySide6.QtGui import QGuiApplication
10
11
12if __name__ == '__main__':
13
14    #get our data
15    url = "http://country.io/names.json"
16    response = urllib.request.urlopen(url)
17    data = json.loads(response.read().decode('utf-8'))
18
19    #Format and sort the data
20    data_list = list(data.values())
21    data_list.sort()
22
23    #Set up the application window
24    app = QGuiApplication(sys.argv)
25    view = QQuickView()
26    view.setResizeMode(QQuickView.SizeRootObjectToView)
27
28    #Expose the list to the Qml code
29    my_model = QStringListModel()
30    my_model.setStringList(data_list)
31    view.setInitialProperties({"myModel": my_model})
32
33    #Load the QML file
34    qml_file = Path(__file__).parent / "view.qml"
35    view.setSource(QUrl.fromLocalFile(qml_file.resolve()))
36
37    #Show the window
38    if view.status() == QQuickView.Error:
39        sys.exit(-1)
40    view.show()
41

42    #execute and cleanup

43    app.exec()

44    del view

11、您的应用程序现在可以运行了。选择 Projects 模式以选择 Python 版本来运行它。

 使用 CTRL+R 键盘快捷键运行应用程序，看看它是否如下所示：