QML 应用程序教程#

本教程将快速带您浏览一个 Python 应用程序，该应用加载一个 QML 文件。QML 是一种声明性语言，它使您能够比传统语言（如 C++）更快地设计 UI。QtQml 和 QtQuick 模块为基于 QML 的 UI 提供了必要的基础设施。

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

在开始之前，安装以下必备软件

以下分步指南指导您使用 Qt Creator 开发应用程序

  1. 打开 Qt Creator 并选择 文件 > 新建文件或项目.. 菜单项以打开以下对话框

    ../../_images/newpyproject.png

  2. 从应用程序模板列表中选择 Qt for Python - Empty 并选择 选择。

    ../../_images/pyprojname.png

  3. 为您的项目输入一个 名称，选择其在文件系统中的位置，并选择 完成 以创建空的 main.py 和 main.pyproject 文件。

    ../../_images/pyprojxplor.png

    这将为您创建一个 main.py 和一个 `main.pyproject 文件。

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

  5. 双击 main.pyproject 以将其以编辑模式打开，并将 view.qml 和 logo.png 添加到 files 列表中。更改后的项目文件应如下所示

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

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

     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. 您现在可以运行应用程序了。选择 项目 模式以选择要运行的Python版本。

    ../../_images/projectsmode.png

使用 CTRL+R 键盘快捷键运行应用程序，查看其外观是否符合以下所示

../../_images/qmlapplication.png

您还可以观看以下视频教程以获取开发此应用程序的指导