01. 初识Qt Quick
一、什么是Qt Qucik
Qt Quick 是 Qt 提供的一种高级用户界面工具包，它包括描述性语言 QML、语言运行时、大量的用户界面元素。Qt Quick 能够与 C++/Python 混合编程，开发者可以使用已有的 Qt 技术结合 Qt Quick，构建具有丰富功能的应用。
QML 全称为 Qt Meta-Object Language，是 Qt Quick 技术的核心与基础，是一种简便易学的标记性语言，用来描述一个程序的用户界面。QML文件的扩展名是 .qml，语法格式非常像 CSS，但又支持 JavaScript 形式的编程控制。在 QML 中，通过具有属性的对象树来表示用户界面，这使得很少或没有编程经验的人也可以顺利地使用 QML 编程。
QML 实现并扩展了 ECMAScript，是一种说明性语言，用来描述基于 Qt 对象系统的用户界面。QML 提供了高可读性的、声明式的、类 CSS 的语法，支持结合动态属性绑定的 ECMAScript 表达式。
Qt Quick 模块是开发 QML 应用的标准库，提供了使用 QML 创建用户界面所需的一切东西，包括可视化类型、交互类型、动画、模型与视图、粒子特效与着色器等。
二、一个简易的QML程序
PySide6 的本质是 Qt 6 for Python，即 Qt 6 的 Python版本。Qt 6 包含两种用户界面技术：Qt Widgets 和 Qt Quick。Qt Widgets 用于创建业务逻辑比较复杂的桌面应用程序，而 QtQuick 可以用于创建界面，可创建流程的动态的界面。Qt Widgets 可使用C++/Python 进行开发，而 Qt Quick 使用一种称为 QML 的声明式语言构建用户界面，并使用 JavaScript 实现逻辑。
我们可以在终端中使用 pip 安装 PySide6 模块。默认是从国外的主站上下载，因此，我们可能会遇到网络不好的情况导致下载失败。我们可以在 pip 指令后通过 -i 指定国内镜像源下载。
pip install pyside6 -i https://mirrors.aliyun.com/pypi/simple
国内常用的 pip 下载源列表：
- 阿里云 https://mirrors.aliyun.com/pypi/simple
- 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple
- 中国科学技术大学 http://pypi.mirrors.ustc.edu.cn/simple
默认在 VSCode 中编写 QML 文件是没有任何提示的。为了方便编写 QML 文件，这里，我们需要安装 Qt 官方提供的 QML 插件。
这里，我们新建一个 template.qml 文件，它的内容如下：
// import声明导入了一个指定的模块版本
import QtQuick.Window
// Window对象表示一个顶级窗口，在QML中，对象用一对大括号{}来表示，大括号前要写对象的类型名字（类型）
// 在QML中，元素是通过大括号{}内的属性来配置的。
Window {
// 在大括号之间，我们通过键值对（property: value）的方式来设置对象的属性
// 属性初始化语句可以分行书写，此时后面可以不跟分号（;）
width: 800 // 窗口的宽度
height: 600 // 窗口的高度
// 也可以把多个属性初始化语句写在一行内，这时，它们之间必须以分号（;）分隔
visible: true; visibility: Window.Minimized // 是否显示窗口与窗口的显示状态
title: "基于QML的窗口应用程序" // 窗口的标题
color: "#99CCFF" // 窗口的背景颜色
opacity: 0.8 // 窗口的透明度
}
然后，我们新建一个 template.py文件，它的内容如下：
import sys
from PySide6.QtWidgets import QApplication
from PySide6.QtQml import QQmlApplicationEngine
if __name__ == "__main__":
app = QApplication(sys.argv) # 1.创建一个QApplication类的实例
engine = QQmlApplicationEngine() # 2.创建QML引擎对象
engine.load("template.qml") # 3.加载QML文件
sys.exit(app.exec()) # 4.进入程序的主循环并通过exit()函数确保主循环安全结束
在 QML 中，，单行注释以 // 开始到行尾结束，多行注释以 /* 开始到 */结束。在 QML 中，注释是不被执行的，可添加注释对代码进行解释或者提高其可读性。注释同样还可用于防止代码执行，这对跟踪问题是非常有用的。
这里，我们使用一个 Window 对象创建一个新的顶层窗口来作为 Qt Quick 的活动场景，它会自动设置好窗口的基本属性，如图标、标题等。我们也可以编写 QML 代码来定制窗口的属性。
Window 在桌面上的 位置，由 x、y 属性决定，其 大小 由 width、height 属性决定。除此之外，你还可以使用 minimumWidth、minimumHeight 来限制窗口的 最小尺寸，使用 maximumWidth、maximumHeight 来限制窗口的 最大尺寸。
窗口的隐藏、显示 由布尔类型的 visible 属性控制，设置其为 true 则 显示窗口，为 false 则 隐藏窗口。
Window 作为受窗口管理系统控制的一个窗口，其 显示状态 有：正常、最小化、最大化、全屏、隐藏。PC 操作系统的窗口管理系统多数都支持鼠标拖动改变窗口的大小和位置。Window 对象的 visibility 属性用来 设置这个窗口的显示状态，可以取下列值：
Window.Windowed，窗口占屏幕的一部分，窗口管理系统支持同时显示多窗口时才有效。Window.Minimized，最小化到任务栏上的一个图标。Window.Maximized，最大化，占用任务栏之外的所有屏幕空间，标题栏依然显示。Window.FullScreen，全屏显示，占用整个屏幕，标题栏隐藏。Window.Hidden，隐藏，窗口不可见，与visible属性的效果一样。Window.AutomaticVisibility，给Window一个默认的显示状态，它的实际值与平台实现有关。
Window 的 title 属性用来 设置窗口标题，字符串类型。color 属性用来 设置窗口的背景颜色，可以用 "blue"、"#RRGGBB"、Qt.rgba() 等形式为其赋值。opacity 属性用来 设置窗口不透明度，取值范围是 0 ～ 1.0。
Window 的 contentOrientation 属性用来 设置窗口的内容布局方向，可以取下列值：
Qt.PrimaryOrientation，使用 显示设备的首选方向。Qt.LandscapeOrientation，横屏。Qt.PortraitOrientation，竖屏。Qt.InvertedLandscapeOrientation，相对于横屏模式，旋转了 180°。Qt.InvertedPortraitOrientation，相对于竖屏模式，旋转了 180°。
一个 Qt Quick 应用可能会有多个窗口，窗口之间的关系由 modality（模态）属性决定，一个模态的窗口会阻止其他窗口获取输入事件。modality 可以取下列值：
Qt.NonModal，非模态。Qt.WindowModal，窗口级别的模态，设置此属性的窗口只针对某一个窗口是模态的，比如子窗口相对父窗口是模态的，相对同一应用中的其他非父窗口则没有模态效果。Qt.ApplicationModal，应用级别的模态，设置此属性的窗口会阻止同一应用的其他窗口获取输入事件。
三、QML语言基础
QML 实现并扩展了 ECMAScript，是一种说明性语言，用来描述基于 Qt 对象系统的用户界面。QML 提供了高可读性的、声明式的、类 CSS 的语法，支持结合动态属性绑定的 ECMAScript 表达式。Qt Quick 模块是开发 QML 应用的标准库，提供了使用 QML 创建用户界面所需的一切东西，包括可视化类型、交互类型、动画、模型与视图、粒子特效与着色器等。
我们修改 template.py 文件的内容。
import sys
from PySide6.QtWidgets import QApplication
from PySide6.QtQuick import QQuickView
if __name__ == "__main__":
app = QApplication(sys.argv) # 1.创建一个QApplication类的实例
view = QQuickView() # 2.创建QML视图对象
view.setSource("template.qml") # 3.加载QML文件
view.show() # 4.显示QML视图对象
sys.exit(app.exec()) # 5.进入程序的主循环并通过exit()函数确保主循环安全结束
我们修改 template.qml 文件的内容。
// import声明导入了一个指定的模块版本
import QtQuick
import QtQuick.Controls
// 在QML中，元素是通过大括号{}内的属性来配置的。
Item {
width: 800 // Item的宽度
height: 600 // Item的高度
visible: true // 显示Item
// 创建一个矩形
Rectangle {
id: rectangle1Id // 矩形的id
x: 100 // 矩形所在窗口的横坐标
y: 100 // 矩形所在窗口的纵坐标
width: 100 // 矩形的宽
height: 100 // 矩形的高
color: "#FFCCCC" // 矩形的填充颜色
}
// 创建一个矩形
Rectangle {
x: rectangle1Id.x + rectangle1Id.width + 100 // 矩形所在窗口的横坐标
y: rectangle1Id.y // 矩形所在窗口的纵坐标
width: rectangle1Id.width // 矩形的宽
height: rectangle1Id.height // 矩形的高
color: rectangle1Id.color // 矩形的填充颜色
}
Button {
id: buttonId
width: 120 // 按钮的宽
height: 60 // 按钮的高
// 使用锚点（anchors）系统来定位文本元素，这里中心的锚点定位到其父元素的中心
anchors.centerIn: parent
text: "点击改变矩形颜色" // 按钮的文本
// 按钮点击时触发信号
onClicked: {
// 改变矩形1的颜色
rectangle1Id.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
}
}
在表达式中，我们可以引用其它对象及其属性。当你这么做的时候，待赋值的属性就和你所引用的对象的那个属性建立了关联，当被引用属性发生变化时，表达式的值会重新计算，而待赋值的属性也会变化。在一个 QML 文档中，每个对象都可以指定一个唯一的 id 属性，在代码中可以通过这个 id 属性来引用某个对象，访问其属性、方法。
一个对象的 id 属性是唯一的，在同一个 QML 文件中不同对象的 id 属性的值不能重复。当给一个对象指定了 id 后，就可以在其它对象或脚本中通过 id 来引用该对象了。id 属性的值，首字符必须是小写字母或下画线，并且不能包含字母、数字、下画线以外的字符。
浙公网安备 33010602011771号