QML 应用教程

本教程提供了一个快速入门，介绍了一个加载QML文件的Python应用程序。QML是一种声明性语言，它让你比传统语言（如C++）更快地设计用户界面。QtQml和QtQuick模块为基于QML的用户界面提供了必要的基础设施。

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

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

以下逐步指导将引导您完成使用Qt Creator的应用程序开发过程：

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

    ../../_images/newpyproject.png

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

    ../../_images/pyprojname.png

  3. 给你的项目起一个名称，选择它在文件系统中的位置，然后选择完成以创建一个空的main.py和main.pyproject。

    ../../_images/pyprojxplor.png

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

  4. 下载 Main.qml, qmldir 和 logo.png 并将它们放在项目文件夹中名为 App 的子目录中。这将创建一个基本的 QML 模块。

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

    {
    "files": ["main.py", "App/Main.qml", "App/logo.png", "App/qmldir"]
}

  6. 现在你已经有了应用程序所需的必要部分，在你的main.py中导入Python模块，并下载国家数据并格式化它：

     1import sys
 2import urllib.request
 3import json
 4
 5from PySide6.QtQuick import QQuickView
 6from PySide6.QtCore import QStringListModel
 7from PySide6.QtGui import QGuiApplication
 8
 9
10if __name__ == '__main__':
11
12    # 获取我们的数据
13    url = "http://country.io/names.json"
14    response = urllib.request.urlopen(url)
15    data = json.loads(response.read().decode('utf-8'))
16
17    # 格式化并排序数据
18    data_list = list(data.values())
19    data_list.sort()

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

     1import sys
 2import urllib.request
 3import json
 4
 5from PySide6.QtQuick import QQuickView
 6from PySide6.QtCore import QStringListModel
 7from PySide6.QtGui import QGuiApplication
 8
 9
10if __name__ == '__main__':
11
12    # 获取我们的数据
13    url = "http://country.io/names.json"
14    response = urllib.request.urlopen(url)
15    data = json.loads(response.read().decode('utf-8'))
16
17    # 格式化并排序数据
18    data_list = list(data.values())
19    data_list.sort()
20
21    # 设置应用程序窗口
22    app = QGuiApplication(sys.argv)
23    view = QQuickView()
24    view.setResizeMode(QQuickView.SizeRootObjectToView)

    注意

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

  8. 你现在可以将 data_list 变量暴露为 QML 初始属性，它将被 view.qml 中的 QML ListView 项使用。

     1import sys
 2import urllib.request
 3import json
 4
 5from PySide6.QtQuick import QQuickView
 6from PySide6.QtCore import QStringListModel
 7from PySide6.QtGui import QGuiApplication
 8
 9
10if __name__ == '__main__':
11
12    # 获取我们的数据
13    url = "http://country.io/names.json"
14    response = urllib.request.urlopen(url)
15    data = json.loads(response.read().decode('utf-8'))
16
17    # 格式化并排序数据
18    data_list = list(data.values())
19    data_list.sort()
20
21    # 设置应用程序窗口
22    app = QGuiApplication(sys.argv)
23    view = QQuickView()
24    view.setResizeMode(QQuickView.SizeRootObjectToView)
25
26    # 将列表暴露给 Qml 代码
27    my_model = QStringListModel()
28    my_model.setStringList(data_list)
29    view.setInitialProperties({"myModel": my_model})

  9. Load the Main.qml to the QQuickView and call show() to display the application window.

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

  10. Finally, execute the application to start the event loop and clean up.

     1import sys
 2import urllib.request
 3import json
 4
 5from PySide6.QtQuick import QQuickView
 6from PySide6.QtCore import QStringListModel
 7from PySide6.QtGui import QGuiApplication
 8
 9
10if __name__ == '__main__':
11
12    # get our data
13    url = "http://country.io/names.json"
14    response = urllib.request.urlopen(url)
15    data = json.loads(response.read().decode('utf-8'))
16
17    # Format and sort the data
18    data_list = list(data.values())
19    data_list.sort()
20
21    # Set up the application window
22    app = QGuiApplication(sys.argv)
23    view = QQuickView()
24    view.setResizeMode(QQuickView.SizeRootObjectToView)
25
26    # Expose the list to the Qml code
27    my_model = QStringListModel()
28    my_model.setStringList(data_list)
29    view.setInitialProperties({"myModel": my_model})
30
31    # Load the QML file
32    # Add the current directory to the import paths and load the main module.
33    view.engine().addImportPath(sys.path[0])
34    view.loadFromModule("App", "Main")
35
36    # Show the window
37    if view.status() == QQuickView.Error:
38        sys.exit(-1)
39    view.show()
40
41    # execute and cleanup
42    app.exec()
43    del view

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

    ../../_images/projectsmode.png

使用CTRL+R键盘快捷键运行应用程序，看看它是否看起来像这样：

../../_images/qmlapplication.png

你也可以观看以下视频教程来获取开发此应用程序的指导：