PySide6: QML应用程序教程

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

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

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

• PySide6 Python包。
• Qt Creator v4.9 Beta 1或更高版本https://download.qt.io.

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

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

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

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

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

4. 下载​​view.qml​​ 和​​logo.png​​, 移动它们到你的项目文件夹.
5. 双击main.pyproject以编辑模式打开它，并追加viw.qml和icon.png到文件列表。这是您的项目文件在更改后的外观：

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

6. 现在您已经拥有了应用程序所需的代码块，请在main.py中导入Python模块,并下载国家数据并将其格式化： 

import sys
import urllib.request
import json
from pathlib import Path
from PySide6.QtQuick import QQuickView
from PySide6.QtCore import QStringListModel, QUrl
from PySide6.QtGui import QGuiApplication

if __name__ == '__main__':
    #get our data
    url = "http://country.io/names.json"
    response = urllib.request.urlopen(url)
    data = json.loads(response.read().decode('utf-8'))
    #Format and sort the data
    data_list = list(data.values())
    data_list.sort()

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

import sys
import urllib.request
import json
from pathlib import Path
from PySide6.QtQuick import QQuickView
from PySide6.QtCore import QStringListModel, QUrl
from PySide6.QtGui import QGuiApplication


if __name__ == '__main__':

    #get our data
    url = "http://country.io/names.json"
    response = urllib.request.urlopen(url)
    data = json.loads(response.read().decode('utf-8'))

    #Format and sort the data
    data_list = list(data.values())
    data_list.sort()

    #Set up the application window
    app = QGuiApplication(sys.argv)
    view = QQuickView()
    view.setResizeMode(QQuickView.SizeRootObjectToView)

注意:

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

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

import sys
import urllib.request
import json
from pathlib import Path
from PySide6.QtQuick import QQuickView
from PySide6.QtCore import QStringListModel, QUrl
from PySide6.QtGui import QGuiApplication

if __name__ == '__main__':
    #get our data
    url = "http://country.io/names.json"
    response = urllib.request.urlopen(url)
    data = json.loads(response.read().decode('utf-8'))

    #Format and sort the data
    data_list = list(data.values())
    data_list.sort()

    #Set up the application window
    app = QGuiApplication(sys.argv)
    view = QQuickView()
    view.setResizeMode(QQuickView.SizeRootObjectToView)

    #Expose the list to the Qml code
    my_model = QStringListModel()
    my_model.setStringList(data_list)
    view.setInitialProperties({"myModel": my_model})

9. 加载view.qml到QQuickView并调用show（）来显示应用程序窗口。

import sys
import urllib.request
import json
from pathlib import Path
from PySide6.QtQuick import QQuickView
from PySide6.QtCore import QStringListModel, QUrl
from PySide6.QtGui import QGuiApplication

if __name__ == '__main__':
    #get our data
    url = "http://country.io/names.json"
    response = urllib.request.urlopen(url)
    data = json.loads(response.read().decode('utf-8'))

    #Format and sort the data
    data_list = list(data.values())
    data_list.sort()

    #Set up the application window
    app = QGuiApplication(sys.argv)
    view = QQuickView()
    view.setResizeMode(QQuickView.SizeRootObjectToView)

    #Expose the list to the Qml code
    my_model = QStringListModel()
    my_model.setStringList(data_list)
    view.setInitialProperties({"myModel": my_model})

    #Load the QML file
    qml_file = Path(__file__).parent / "view.qml"
    view.setSource(QUrl.fromLocalFile(qml_file.resolve()))

    #Show the window
    if view.status() == QQuickView.Error:
        sys.exit(-1)
    view.show()

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

import sys
import urllib.request
import json
from pathlib import Path
from PySide6.QtQuick import QQuickView
from PySide6.QtCore import QStringListModel, QUrl
from PySide6.QtGui import QGuiApplication

if __name__ == '__main__':

    #get our data
    url = "http://country.io/names.json"
    response = urllib.request.urlopen(url)
    data = json.loads(response.read().decode('utf-8'))

    #Format and sort the data
    data_list = list(data.values())
    data_list.sort()

    #Set up the application window
    app = QGuiApplication(sys.argv)
    view = QQuickView()
    view.setResizeMode(QQuickView.SizeRootObjectToView)

    #Expose the list to the Qml code
    my_model = QStringListModel()
    my_model.setStringList(data_list)
    view.setInitialProperties({"myModel": my_model})

    #Load the QML file
    qml_file = Path(__file__).parent / "view.qml"
    view.setSource(QUrl.fromLocalFile(qml_file.resolve()))

    #Show the window
    if view.status() == QQuickView.Error:
        sys.exit(-1)
    view.show()

    #execute and cleanup
    app.exec()
    del view

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

使用CTRL+R键盘快捷键运行应用程序，查看其外观是否如下：