上一篇： PyQt/PySide6快速入门 - 2 使用QWidget设计GUI

QML简介

QML（Qt Meta-Object Language，Qt元对象语言），Qt推出的Qt Quick技术的一部分，是一种用于描述应用程序用户界面的声明式编程语言。 它使用一些可视组件以及这些组件之间的交互来描述用户界面。QML是一种高可读性的语言，可以使组件以动态方式进行交互，并且允许组件在用户界面中很容易地实现复用和自定义。

image.png

QML是Qt Quick （Qt4.7.0+的新特性）核心组件之一：Qt Quick是一组旨在帮助开发者创建在手机、媒体播放器、机顶盒和其他便携设备上使用越来越多的直观、现代、流畅UI的工具集合。

如果学过前端开发，会发现QML的思想跟Vue.js、Angula等非常相似。语法格式非常像HTML+CSS，也支持JavaScript形式的编程控制。Qt Designer可以设计出.ui界面文件，但是不支持和Qt原生C++代码的交互。而Qt Creator可以设计出.qml文件，QML可以和Qt原生代码进行交互，作为MVC模型中的“View”。

国内Vue.js很普及，后续会出一个完整的QML与Vue的功能对照表，如：生命周期、Component、信号与Slot、计算属性、Transition动画、Repeater/V-for等。

MVC开发框架

MVC模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

image.png

MVC模式最早由Trygve Reenskaug在1978年提出，是施乐帕罗奥多研究中心（Xerox PARC）在20世纪80年代为程序语言Smalltalk发明的一种软件架构。MVC模式的目的是实现一种动态的程式设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式透过对复杂度的简化，使程序结构更加直观及容易扩展和维护。软件系统透过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。专业人员可以依据自身的专长分组：

• 模型（Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。
• 视图（View） - 界面设计人员进行图形界面设计。
• 控制器（Controller）- 负责转发请求，对请求进行处理。

在Qt开发中，QML就是作为View（+部分简单的Model）模块。而Python/C++则实现Controller+Model功能。

QML开发环境

在安装完Python(> 3.6)、PySide6之后，其实就可以直接开发简单的app了。

pip install pyside6

当然，有可视化开发环境会事半功倍，界面开发可使用Qt Creator（注意跟Qt Designer不同，Designer只能设计.ui文件），Python调试则使用PyCharm。

Qt Creator有社区版本，Windows下安装步骤：

1. 下载Qt在线安装程序: qt official_releases/online_installers (qt.io)

2. 注册一个Qt账号

3. 运行qt-unified-windows-x86-4.3.0-1-online.exe

4. 选择自定义安装Custom installation

image.png

5. 组件选择：（这里选择错了也没关系，安装后可以在程序里找“Qt Maintenance Tool”重新增减组件）

• Qt 6.3.0 MinGW，用于直接调试C++和 .qml文件
• 如果你用MS VS的话，可选择MSVC 2019

• Qt Creator 7.0.2和相应debug模块

  
  
  

  image.png

耐心等待安装完成，大概下载700MB，安装后占用约4GB空间。

在开始菜单里找到Qt Creator，运行：

image.png

注意：Qt现在推广Qt Design Studio，所以把Qt Creator里可视化编辑QML的工具给隐藏了，要自行打开：菜单Help --> About Plugins... --> 勾选Designer，重启程序。

image.png

第一个Py QML程序

Qt Creator: File --> New Project...

1. 这里有很多模板，第一种“Application (Qt)”，适合C++开发。第二种"Application (Qt for Python)"就是适合Python(PySide6/PyQt)开发的。
2. 第二列，选择“Qt Quick Application"，使用QML开发，点下一步
3. 选择最新的PySide6，点完成

会自动按模板创建3个文件：

pyqml.pyproject

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

main.py

import os
from pathlib import Path
import sys

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

if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    engine.load(os.fspath(Path(__file__).resolve().parent / "main.qml"))
    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

这个Python主程序非常简洁：

• 引用PySide6。如果是使用PyQt，则直接修改为PyQt6就行
• 创建Qt主程序：app = QGuiApplication(sys.argv)
• 创建解析QML的引擎： engine = QQmlApplicationEngine()
• engine加载QML文件： engine.load("main.qml")
• app就可以直接运行了

main.qml

import QtQuick
import QtQuick.Window

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

这个QML主界面，内容也非常一目了然：

• 创建一个Window组件
• 设置它的属性：width, height, visible, title。相比.ui文件，是不是简洁方便多了？
• 用鼠标点击.qml里字段，如Window，按"F1"，可以直接查询对应的帮助文档

如何运行

左边一列工具栏里，先点击“Project"，选择Python解释器（注意确保PySide6已安装）

image.png

点工具栏左下角绿色运行键，第一个Py QML程序就顺利运行了：

• 注意Applicationi Output里，可以查看调试信息

image.png

如果是复杂的Python程序，可以在PyCharm中打开这个目录，方便调试 .py文件。

点工具栏"Edit"，可以编辑源文件，双击“main.qml“，这时工具栏 "Design" 就变亮了。

点工具栏"Design"，右上角可选显示方式，一般使用"Essentials" 或 "UX-Design"。

image.png

可视化编辑UI (.qml文件)

左边"Components"点 "+"，添加"QtQuick.Controls，Layouts"等显示到常用组件

image.png

我们来随便试试吧：

拖一个"Text"、一个"Button"组件到中间"Form Editor"，app主界面上。右边的"Text Editor"上会自动更新.qml文件。同理，你在外部改动 .qml文件后，预览也会自动更新。语法跟CSS类似。

给"Button"添加一个onClicked事件，可以看到就是JavaScript语法，实际上，你可以在QML文件里直接写任意js代码并调用。当然，Controller控制功能还是建议与View分开。

image.png

保存.qml，再次运行，可以看到界面已经能响应Button点击了，同时console.log信息也输出“Application Output”了。

是不是有回到Vue.js写前端的熟悉感觉了哈？

小贴士：

QML程序在PyCharm里调试，看不到console.log输出怎么办？

• Pycharm打开app目录
• 运行main.py
• 右上角点箭头：Edit Configurations...

• Execution: 勾选Emulate terminal in output console

image.png

• 这样，python输出和QML输出的信息就能同时看到了：

C:\Users\kevinqq\AppData\Local\Programs\Python\Python38\python.exe C:/Users/kevinqq/git/qtProject/pyqml/main.py
<PySide6.QtGui.QWindow(0x22fe7329) at 0x0000022F>
qml: button clicked
qml: button clicked

Process finished with exit code 0

下一篇，使用QML来改写第2篇的天气预报程序，涉及信号、动画