教程：Qt Quick 和 Python

首先，创建一个Qt for Python 应用程序项目。然后，编辑模板代码，开发一个使用Qt Quick 以多种语言显示文本Hello World的小应用程序。

有关创建Qt for Python 应用程序的更多示例，请参阅Qt for Python 示例和教程。

创建一个空项目

要创建一个有主 QML 文件的Qt for Python 应用程序：

1. 转到File >New Project 。
2. 选择 Application (Qt for Python)> Qt Quick Application - Empty>Choose ，打开Project Location 对话框。

   

3. 在Name 中，输入项目名称。例如，hello_world_quick。
4. 在Create in 中，输入项目文件的路径。例如，C:\Examples 。
5. 选择Next （Windows 和 Linux）或Continue （macOS），打开Define Project Details 对话框。

   

6. 在PySide version 中，选择生成代码的 PySide 版本。
7. 选择Next 或Continue ，打开Kit Selection 对话框。

   

8. 选择用于构建、部署和运行项目的 Python 工具包。默认情况下，这会在源代码目录内为项目创建一个虚拟环境。要使用全局解释器，请选择与Details 中工具包的 Python 名称相同的构建配置。
9. 查看项目设置，然后选择Finish （在 Windows 和 Linux 上）或Done （在 macOS 上）创建项目。

向导会生成以下文件：

• pyproject.toml其中列出了 Python 项目中的文件和其他配置。
• main.py其中包含一些模板代码。
• main.qml导入Qt Quick 控件。
• requirements.txt保存生成代码的 PySide 版本。你可以使用这个文件，用 pip 安装所需的 PySide 版本。

为项目安装 PySide6

在Edit 模式下，选择Install 为项目设置 PySide6。

添加Qt Quick 导入

向导会在main.py 源文件中添加以下导入，以便访问QGuiApplication 和QQmlApplicationEngine ：

import sys
from pathlib import Path

from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine

添加一个主函数

向导还添加了一个主函数，它创建了一个QGuiApplication 实例，并将系统参数传递给QGuiApplication 对象：

if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    ...

加载 QML 文件

主类中的以下几行创建了一个QQmlApplicationEngine 实例，并将生成的 QML 文件加载到引擎对象中：

...
engine = QQmlApplicationEngine()
qml_file = Path(__file__).resolve().parent / "main.qml"
engine.load(qml_file)
...

最后，向导添加了检查是否成功加载文件的代码。如果加载文件失败，应用程序将以错误代码退出。如果加载成功，向导会调用app.exec() 方法进入 Qt 主循环并开始执行 Qt 代码：

...
if not engine.rootObjects():
    sys.exit(-1)
sys.exit(app.exec())
...

设计用户界面

在Edit 模式下打开main.qml 文件，设计Qt Quick UI。

添加导入

为Qt Quick 控件和布局添加导入：

import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts

添加属性和函数

向导会添加一个主窗口：

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

添加属性和函数，以随机选择显示文本的语言：

    ...
    readonly property list<string> texts: ["Hallo Welt", "Hei maailma",
                                       "Hola Mundo", "Привет мир"]

function setText() {
    var i = Math.round(Math.random() * 3)
    text.text = texts[i]
}

添加Qt Quick 控件

在ColumnLayout 类型中添加Text 和Button QML 类型，以设计用户界面：

    ColumnLayout {
    anchors.fill:  parent

    Text {
        id: text
        text: "Hello World"
        Layout.alignment: Qt.AlignHCenter
    }
    Button {
        text: "Click me"
        Layout.alignment: Qt.AlignHCenter
        onClicked:  setText()
    }
}

您还可以使用 Qt Design Studio来设计Qt Quick 用户界面。

运行应用程序

选择 (Run) 运行应用程序。