一、基本元素
元素可以被分为 可视化元素 与 非可视化元素。一个 可视化元素（例如矩形框 Rectangle）有着几何形状并且可以在屏幕上显示。一个 非可视化元素（例如计时器 Timer）提供了常用的功能，通常用于操作可视化元素。这里，我们先介绍几个基本的 可视元素，例如 Item（基础元素对象），Rectangle（矩形框），Text（文本），Image（图像）和 MouseArea（鼠标区域）。
我们可以在终端中使用 pip 安装 PySide6 模块。默认是从国外的主站上下载，因此，我们可能会遇到网络不好的情况导致下载失败。我们可以在 pip 指令后通过 -i 指定国内镜像源下载。
pip install pygame -i https://mirrors.aliyun.com/pypi/simple
国内常用的 pip 下载源列表：
- 阿里云 https://mirrors.aliyun.com/pypi/simple
- 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple
- 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple
- 中国科学技术大学 http://pypi.mirrors.ustc.edu.cn/simple
二、Item
Item 是 Qt Quick 中 所有可视元素的基类，虽然它自己什么也不绘制，但是它定义了绘制图元所需要的大部分通用属性，比如如下属性：
x // 横坐标
y // 纵坐标
z // 堆栈次序width // 宽
height // 高visible // 是否可见
opacity // 不透明度，范围0.0~1.0
clip // 裁切显示范围anchoring // 锚定rotation // 旋转
scale // 缩放
transform // 通用的x，y，z属性列表转换
transformOrigin // 旋转基点设置
Item（基本元素对象）通常被用来作为其它元素的容器使用。
我们新建一个 template.py 文件。
import sysfrom PySide6.QtWidgets import QApplication
from PySide6.QtQuick import QQuickViewif __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()函数确保主循环安全结束
我们也可以使用 Item 及其派生类作为 QML 文档的根对象。使用 QQuickView 显示 QML 文档时，对窗口的控制权（比如设置窗口标题、Icon、窗口的最小尺寸等）在 C++/Python 代码中实现；而使用 QQmlApplicationEngine 加载以 Window 为根对象的 QML 文档，QML 文档则拥有窗口的完整控制权，可以直接设置标题、窗口尺寸等属性。
我们新建一个 template.qml 文件。
import QtQuick// 在QML中，元素是通过大括号{}内的属性来配置的。
Item {width: 800 // Item的宽度height: 600 // Item的高度visible: true // 显示Item// 创建一个矩形Rectangle {x: 100 // 矩形所在窗口的横坐标y: 100 // 矩形所在窗口的纵坐标z: 2 // 矩形的Z轴坐标width: 100 // 矩形的宽height: 100 // 矩形的高rotation: 15 // 旋转color: "#FFCCCC" // 矩形的填充颜色}// 创建一个矩形Rectangle {x: 150 // 矩形所在窗口的横坐标y: 150 // 矩形所在窗口的纵坐标z: 1 // 矩形的Z轴坐标width: 100 // 矩形的宽height: 100 // 矩形的高scale: 1.5 // 缩放color: "#99CCFF" // 矩形的填充颜色}
}
Item 的 z 属性，用来 指定图元在场景中的 Z 序。z 属性的类型是一个 real 类型，数值越小，图元就越垫底（远离我们），数值越大，图元就越靠近我们。
Item 的 clip 属性是 根据自己的位置和大小来裁切它自己以及孩子们的显示范围。如果 clip 为 true，那么子 Item 无论怎样都不能超过父 Item 的显示范围，如果 clip 为 false，那么有些子 Item 就可能超过父 Item 的显示范围。
修改 template.qml 文件的内容，让 Item 的 clip 属性为 true。
import QtQuick// 在QML中，元素是通过大括号{}内的属性来配置的。
Item {width: 800 // Item的宽度height: 600 // Item的高度visible: true // 显示Item// 创建一个矩形Rectangle {x: 100 // 矩形所在窗口的横坐标y: 100 // 矩形所在窗口的纵坐标width: 100 // 矩形的宽height: 100 // 矩形的高rotation: 45 // 旋转scale: 1.5 // 缩放color: "#FFCCCC" // 矩形的填充颜色clip: true// 创建一个矩形Rectangle {x: 50 // 矩形所在窗口的横坐标y: 50 // 矩形所在窗口的纵坐标width: 100 // 矩形的宽height: 100 // 矩形的高color: "#99CCFF" // 矩形的填充颜色}}
}
修改 template.qml 文件的内容，让 Item 的 clip 属性为 false。
import QtQuick// 在QML中，元素是通过大括号{}内的属性来配置的。
Item {width: 800 // Item的宽度height: 600 // Item的高度visible: true // 显示Item// 创建一个矩形Rectangle {x: 100 // 矩形所在窗口的横坐标y: 100 // 矩形所在窗口的纵坐标width: 100 // 矩形的宽height: 100 // 矩形的高color: "#FFCCCC" // 矩形的填充颜色clip: false// 创建一个矩形Rectangle {x: 50 // 矩形所在窗口的横坐标y: 50 // 矩形所在窗口的纵坐标width: 100 // 矩形的宽height: 100 // 矩形的高color: "#99CCFF" // 矩形的填充颜色}}
}
三、Rectangle
Rectangle 用来绘制一个填充矩形，可以带边框，也可以不带，可以使用纯色填充，也可以使用渐变色填充，甚至还可以不填充而只提供边框。
Rectangle 有很多属性。其中，x 用来指定 横坐标，y 用来指定 纵坐标，width 用来 指定 宽，height 用来 指定 高。color 属性可以指定 填充颜色。border.width 用来指定 边框的宽度，border.color 指定 边框颜色。如果我们想要 绘制圆角矩形，只要设置 radius 属性就行了。
QML 中渐变色的类型是 Gradient，渐变色通过两个或多个颜色值来指定，QML 会自动在你指定的颜色之间插值，进行无缝填充。Gradient 使用 GradientStop 来指定一个颜色值和它的位置（取值在 0.0 与 1.0 之间）。
修改 template.qml 文件的内容。
import QtQuick// 在QML中，元素是通过大括号{}内的属性来配置的。
Item {width: 800 // Item的宽度height: 600 // Item的高度visible: true // 显示Item// 创建一个矩形Rectangle {x: 100 // 矩形所在窗口的横坐标y: 100 // 矩形所在窗口的纵坐标width: 600 // 矩形的宽height: 400 // 矩形的高radius: 100 // 矩形的圆角半径color: "#7bb6ffff" // 矩形的填充颜色border.width: 10 // 矩形的边框宽度border.color: "#FF6666" // 矩形的边框颜色 // 设置渐变色属性gradient: Gradient{GradientStop {position: 0.0; color: "#CCFFFF"}GradientStop {position: 0.3; color: "#CCCCFF"}GradientStop {position: 0.6; color: "#99CCFF"}GradientStop {position: 1.0; color: "#FF99CC"}}}
}
Rectangle的宽和高指的是内部填充区域的宽和高加上对应边框的宽度。在 QML 中，我们可以使用
Rectangle的gradient属性 设置渐变色供填充使用，如果你同时指定了color和gradient，那么gradient生效。
四、Text
Text 元素可以 显示纯文本或者富文本（使用 HTML 标记修饰的文本）。它有 font、text、color、elide、textFormat、wrapMode、horizontalAlignment、verticalAlignment 等属性，你可以通过这些属性来决定 Text 元素如何显示文本。
Text 元素的 font 分组属性允许你设置 TextInput 元素所用字体的各种属性，包括 字体族（family）、大小（pixelSize、pointSize）、粗细（bold、weight）、斜体（italic）、下画线（underline）等。
当不指定 textFormat 属性时，Text 元素默认使用 Text.AutoText，它会 自动检测文本是纯文本还是富文本，如果你明确知道要显示的是富文本，则可以显式指定 textFormat 属性，可以取值如下：
Text.AutoText
Text.PlainText
Text.StyledText
Text.RichText
Text.MarkdownText
如果你没有明确指定一个 Text 对象的高度和宽度，它将尝试确定需要多少空间，并进行相应的设置。这时 Text 为了适应文本的宽度，width 会变得很大，可能超出父 Item 的边界，会导致要么有一部分文本看不见，要么和其它的 Item 重叠。
如果你明确指定一个 Text 对象的高度和宽度，但文本的高度或宽度超过了你设置的属性值，这时 Text 为了适应文本的宽度，width 会变得很大。这是，我们可以通过 wrapMode 属性 设置文本的换行模式。
// (默认）不进行换行。如果文本中换行不够，文本宽度则会超过设定的宽度。
Text.NoWrap// 仅在单词边界进行换行。如果单词过长，文本宽度将超过设定宽度。
Text.WordWrap// 换行在一行的任何一点进行，即使换行发生在单词中间
Text.WrapAnywhere// 如果可能，换行会在单词边界进行。否则，换行会在行上的适当位置进行，即使是在单词中间。
Text.Wrap
如果你希望在有限的空间内显示一行长文本，显示不下时 省略处理，则可以设置 elide 属性。
Text.ElideNone // 默认值
Text.ElideLeft
Text.ElideMiddle
Text.ElideRight
Text 的 horizontalAlignment 和 verticalAlignment 分别用来 设置文本在 Text 项目区域中的水平对齐方式和垂直对齐方式。默认文本在 左上方。对于 水平对齐方式，其取值有 Text.AlignLeft、Text.AlignRight、Text.AlignHCenter 和Text.AlignJustify，对于 垂直对齐方式，其取值有 Text.AlignTop、Text.AlignBottom 和 Text.AlignVCenter。对于没有设置 Text 大小的单行文本，Text 的大小就是包含文本的区域。这种情况下，所有的对齐都是等价的。
Text 元素的 style 属性提供了几种文字风格：Text.Outline、Text.Raised、Text.Sunken。而 styleColor 属性可以和 style 配合使用（如果没有指定 style，则 styleColor 不生效），比如 style 为 Text.Outline 时，styleColor 就是文字轮廓的颜色。
当用户 点击文本中内嵌的链接 时会触发 linkActivated 信号，我们可以实现 onLinkActivated 信号处理器来处理。当 鼠标悬停在文本内嵌的链接上方时会触发 linkHovered 信号，我们可以实现 onLinkHovered 信号处理器来处理。
修改 template.qml 文件的内容。
import QtQuick.Window// Window控件表示一个顶级窗口
// 在QML中，元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 创建一个文本Text {id: text1 // 文本的idwidth: Window.width // 宽度color: "#9999FF" // 字体的颜色font.family: "楷体"font.bold: true // 字体是否加粗font.pixelSize: 32 // 字体大小text: "<a href='https://www.baidu.com'>百度一下</a>"// 点击链接时触发信号onLinkActivated: function(link){console.log("点击了链接：【" + link + "】")Qt.openUrlExternally(link) // 默认浏览器打开链接}}// 创建一个文本Text {id: text2 // 文本的idy: text1.y + 50 // 纵坐标width: Window.width // 宽度color: text1.color // 字体的颜色text: "过去是绝对无法改变也无法消除的，但是未来却永远在你面前！"font.family: text1.font.familyfont.bold: text1.font.bold // 字体是否加粗font.pixelSize: text1.font.pixelSize // 字体大小}// 创建一个文本Text {id: text3 // 文本的idy: text1.y + 100 // 纵坐标width: Window.width // 宽度color: text1.color // 字体的颜色text: "就像季节交替不断一般，人们也不断相继相承，那才是活在这世上之人应有之态。"font.family: text1.font.familyfont.bold: text1.font.bold // 字体是否加粗font.pixelSize: text1.font.pixelSize // 字体大小wrapMode: Text.Wrap}// 创建一个文本Text {id: text4 // 文本的idy: text1.y + 200 // 纵坐标width: Window.width // 宽度color: text1.color // 字体的颜色text: "和喜欢的人天长地久是一件非常好的事。如果自己喜欢的人能喜欢自己是再好不过了。不过，只要我喜欢的人能够幸福就好了。"font.family: text1.font.familyfont.bold: text1.font.bold // 字体是否加粗font.pixelSize: text1.font.pixelSize // 字体大小elide: Text.ElideRight}
}import QtQuick// 在QML中，元素是通过大括号{}内的属性来配置的。
Item {width: 800 // Item的宽度height: 600 // Item的高度visible: true // 显示Item// 创建一个文本Text {id: text1 // 文本的idwidth: Window.width // 宽度color: "#9999FF" // 字体的颜色font.family: "楷体"font.bold: true // 字体是否加粗font.pixelSize: 32 // 字体大小text: "<a href='https://www.baidu.com'>百度一下</a>"// 点击链接时触发信号onLinkActivated: function(link){console.log("点击了链接：【" + link + "】")Qt.openUrlExternally(link) // 默认浏览器打开链接}}// 创建一个文本Text {id: text2 // 文本的idy: text1.y + 50 // 纵坐标width: Window.width // 宽度color: text1.color // 字体的颜色font.family: text1.font.familyfont.bold: text1.font.bold // 字体是否加粗font.pixelSize: text1.font.pixelSize // 字体大小style: Text.Outline // 字体的样式styleColor: "#f50000ff" // 字体的样式颜色text: "过去是绝对无法改变也无法消除的，但是未来却永远在你面前！"}// 创建一个文本Text {id: text3 // 文本的idy: text1.y + 100 // 纵坐标width: Window.width // 宽度color: text1.color // 字体的颜色font.family: text1.font.familyfont.bold: text1.font.bold // 字体是否加粗font.pixelSize: text1.font.pixelSize // 字体大小wrapMode: Text.Wrap // 文本超出宽度时的换行方式style: Text.Raised // 字体的样式styleColor: text2.styleColor // 字体的样式颜色text: "就像季节交替不断一般，人们也不断相继相承，那才是活在这世上之人应有之态。"}// 创建一个文本Text {id: text4 // 文本的idy: text1.y + 200 // 纵坐标width: Window.width // 宽度color: text1.color // 字体的颜色font.family: text1.font.familyfont.bold: text1.font.bold // 字体是否加粗font.pixelSize: text1.font.pixelSize // 字体大小elide: Text.ElideRight // 文本超出宽度时的省略号显示方式style: Text.Sunken // 字体的样式styleColor: text2.styleColor // 字体的样式颜色text: "和喜欢的人天长地久是一件非常好的事。如果自己喜欢的人能喜欢自己是再好不过了。不过，只要我喜欢的人能够幸福就好了。"}
}
只有在设置了明确宽度的情况下，文本才会换行或省略显示。
一个对象的 id 属性是唯一的，在同一个 QML 文件中不同对象的 id 属性的值不能重复。当给一个对象指定了 id 后，就可以在其它对象或脚本中通过 id 来引用该对象了。
id 属性的值，首字符必须是小写字母或下画线，并且不能包含字母、数字、下画线以外的字符。
五、TextInput
TextInput 用于 编辑一行文本，类似于 QLineEdit。TextInput 有一些属性与 Text 元素一样，如 text 属性 可以设置或获取元素的文本，horizontalAlignment 属性和 verticalAlignment 属性用于 设定文本对齐方式，wrapMode 属性 设置文本超过控件宽度时的换行策略，color 属性用来 设置文字颜色，contentWidth 属性、contentHeight 属性 返回文本的宽、高。
我们可以使用 length 属性 返回编辑框内的字符个数。maximumLength 属性用来 设置编辑框允许输入的字符串的最大长度，超过这个长度就会被截断。
我们还可以使用 validator 属性或 inputMask 属性对输入文本做范围限制，也可以使用 echoMode 属性 设置密码输入方式。
TextInput.Normal // 正常显示输入的字符，这是默认值
TextInput.NoEcho // 输入文字时不显示任何输入，文字内容和个数都不可见
TextInput.Password // 显示密码掩码，不显示实际输入的字符，能显示字符个数
TextInput.PasswordEchoOnEdit // 在编辑的时候显示字符，不编辑的时候显示掩码
TextInput 的 echoMode 属性默认为 TextInput.Normal，即输入什么显示什么。如果 echoMode 属性不为 TextInput.Normal，那么 displayText 属性就保存显示给用户的文本，而 text 属性则保存实际输入的文本。
TextInput 还支持 粘贴（canPaste）、撤销（canUndo）、重做（canRedo）、滚动（autoScroll）等特性。TextInput 不支持使用 HTML 标记的富文本。
TextInput 目前支持 IntValidator、DoubleValidator、RegularExpressionValidator，如果你设置了 validator 属性，那么用户就只能输入符合 validator 所界定范围的字符。IntValidator 可以设置一个整数范围，top 属性、bottom 属性 设定最大值、最小值，不设置的话使用整型的最大值、最小值。
TextInput 允许用户选择文本，如果 selectByMouse 属性设置为 true，用户就可以 使用鼠标来选择编辑框内的文字。selectedText 是 只读属性，保存用户选中的文字。selectionStart、selectionEnd 表示 选中的起、止位置。selectedTextColor 表示 选中的文本颜色，而 selectionColor 则表示 选中框的颜色。
TextInput 可以通过 cursorDelegate 属性来定制它的外观。cursorPosition 属性可以 设置或返回光标位置。cursorVisible 属性用来 设置或返回光标的可见状态。cursorRectangle 属性是 只读属性，返回光标所在矩形，定制的 cursorDelegate 会受这个属性影响，当 cursorRectangle 变化时，cursorDelegate 的尺寸和位置会跟着变化。
当用户 按了回车键或确认键，或者 编辑框失去焦点 时，会发出 accepted 和 editingFinished 信号，我们可以实现 onAccepted 和 onEditingFinished 信号处理器来处理。当我们 编辑文本框 时，会发出 textEdited 信号，我们可以实现 onTextEdited 信号。如果你设置了 inputMask 或 validator，那么只有在编辑框内的文本符合限制条件时这两个信号才会触发。
修改 template.qml 文件的内容。
import QtQuick// 在QML中，元素是通过大括号{}内的属性来配置的。
Item {width: 800 // Item的宽度height: 600 // Item的高度visible: true // 显示Item// 创建一个文本Text {color: "#9999FF" // 字体的颜色font.family: "楷体" // 字体 font.pixelSize: 32 // 字体大小text: "用户名"}// 创建一个文本输入框TextInput {x: 100 // x坐标 width: 600 // 宽度color: "#9999FF" // 字体的颜色font.family: "楷体" // 字体 font.pixelSize: 32 // 字体大小validator: RegularExpressionValidator { // 创建一个正则表达式验证器regularExpression: /^[a-zA-Z0-9_\.]{3, 16}$/ // 正则表达式，用于验证用户名}// 当文本输入框的输入完成时触发信号onEditingFinished: {console.log("用户名：" + text)}}Text {y: 50 // y坐标color: "#9999FF" // 字体的颜色font.family: "楷体" // 字体 font.pixelSize: 32 // 字体大小text: "密码"}TextInput {x: 100 // x坐标y: 50 // y坐标width: 600 // 宽度color: "#9999FF" // 字体的颜色font.family: "楷体" // 字体 font.pixelSize: 32 // 字体大小echoMode: TextInput.PasswordEchoOnEdit // 密码输入模式validator: RegularExpressionValidator { // 创建一个正则表达式验证器regularExpression: /^[a-zA-Z0-9_\.]{3, 16}$/ // 正则表达式，用于验证用户名}// 当文本输入框的输入完成时触发信号onEditingFinished: {console.log("密码：" + text)}}Text {y: 100 // y坐标color: "#9999FF" // 字体的颜色font.family: "楷体" // 字体 font.pixelSize: 32 // 字体大小text: "年龄"}TextInput {x: 100 // x坐标y: 100 // y坐标width: 600 // 宽度color: "#9999FF" // 字体的颜色font.family: "楷体" // 字体 font.pixelSize: 32 // 字体大小validator: IntValidator { // 创建一个正则表达式验证器bottom: 0 // 最小数值top: 800 // 最大数值}// 当文本输入框的输入完成时触发信号onEditingFinished: {console.log("年龄：" + text)}}Text {y: 150 // y坐标color: "#9999FF" // 字体的颜色font.family: "楷体" // 字体 font.pixelSize: 32 // 字体大小text: "序列号"}TextInput {x: 100 // x坐标y: 150 // y坐标width: 600 // 宽度color: "#9999FF" // 字体的颜色font.family: "楷体" // 字体 font.pixelSize: 32 // 字体大小inputMask:">AAAAA-AAAAA-AAAAA-AAAAA-AAAAA;#" // 输入掩码// 当文本输入框的输入完成时触发信号onEditingFinished: {console.log("序列号：" + text)}}
}
六、TextEdit
TextEdit 是 Qt Quick 提供的 多行文本编辑框，它的大多数属性与 TextInput 类似。
TextEdit 的 textFormat 属性用于 指定文本格式，它可以取值如下：
TextEdit.PlainText // 默认值，纯文本
TextEdit.RichText // 富文本
TextEdit.AutoText // 自动检测纯文本或富文本
当一行文本要占用的宽度大于 TextEdit 的宽度时，可以使用 wrapMode 属性决定如何折行，它可以取值如下：
TextEdit.WordWrap // 在单词边界处折行
TextEdit.NoWrap // 不折行，超出宽度的文本不显示
TextEdit.WrapAnywhere // 折行，不考虑单词边界
TextEdit.Wrap // 折行，尽量在单词边界处折行
TextEdit 的 textDocument 属性，可以结合 QSyntaxHighlighter 来实现语法高亮。lineCount 属性 返回编辑框内的文本行数。修改文本可以使用 append()、insert()、cut()、paste()、remove() 等方法，获取文本可以使用 getText() 方法或者 text属性。
当用户 按了回车键或确认键，或者 编辑框失去焦点 时，会发出 editingFinished 信号。当我们 编辑文本 时，会发出 textEdited 信号。当用户 点击文本中内嵌的链接 时会触发 linkActivated 信号。当 鼠标悬停在文本内嵌的链接上方时会触发 linkHovered 信号 。
修改 template.qml 文件的内容。
import QtQuick// 在QML中，元素是通过大括号{}内的属性来配置的。
Item {width: 800 // Item的宽度height: 600 // Item的高度visible: true // 显示Item// 创建一个文本框TextEdit {width: 800 // 宽度height: 600color: "#9999FF" // 字体的颜色font.family: "楷体" // 字体 font.pixelSize: 32 // 字体大小wrapMode: TextEdit.WordWrap // 文本自动换行模式textFormat: TextEdit.RichText // 富文本text: "<a href='https://www.baidu.com'>百度一下</a><br/>" // 显示的文本// 点击链接时触发信号onLinkActivated : function(link){console.log("点击了链接：【" + link + "】")Qt.openUrlExternally(link) // 默认浏览器打开链接}// 鼠标悬停链接时触发信号onLinkHovered : function(link){if (link != ""){console.log("在【" + link + "】链接处悬停")}}}
}
七、Image
Image 可以 显示一个图片，只要是 Qt 支持的，比如 JPG、PNG、BMP、GIF、SVG 等都可以显示。它只能显示静态图片，对于 GIF 等格式，只会把第一帧显示出来。如果要显示动画，则可以使用 AnimatedSprite 或者 AnimatedImage。
Image 的 width 和 height 属性用来 设定图元的大小，如果没有设置它们，那么 Image 会使用 图片本身的尺寸。如果设置了 width 和 height ，那么图片就可能会被拉伸来适应这个尺寸。此时 fillMode 属性可以 设置图片的填充模式，它可以取值如下：
Image.Stretch // 拉伸
Image.PreserveAspectFit // 等比缩放
Image.PreserveAspectCrop // 等比缩放，最大化填充Image，必要时裁剪图片
Image.Tile // 在水平和垂直两个方向平铺，就像贴瓷砖那样
Image.TileVertically // 垂直平铺
Image.TileHorizontally // 水平平铺
Image.Pad // 保持图片原样不做变换
Image 默认会 阻塞式地加载图片，如果要显示的图片很小，则没什么问题，如果分辨率很高，则可能比较卡顿。此时你可以设置 asynchronous 属性为 true 来 开启异步加载模式，在这种模式下 Image 使用一个线程来加载图片，而你可以在界面上显示一个等待图标之类的小玩意儿来告诉用户他需要等会儿。然后，当 status（枚举值）的值为 Image.Ready 时再隐藏加载等候界面。status 属性的取值如下：
Image.Null
Image.Ready
Image.Loading
Image.Error
Image 还支持 从网络加载图片。它的 source 属性类型是 url，可以接受 Qt 支持的任意一种网络协议，比如 http、ftp 等。而当 Image 识别到你提供的 source 是网络资源时，会自动启用异步加载模式。此时 Image 的 progress（取值范围是0.0～1.0）、status（枚举值）都会适时更新，你可以根据它们判断何时结束加载等候提示界面。
onStatusChanged 是信号处理器，Image 的 status 属性变化时会发射 statusChanged() 信号。
修改 template.qml 文件的内容。
import QtQuick
import QtQuick.Controls// 在QML中，元素是通过大括号{}内的属性来配置的。
Item {width: 800 // Item的宽度height: 600 // Item的高度visible: true // 显示Item// 创建一个图像Image {id: imageViewwidth: Window.width // 宽height: Window.height // 高source: "https://s.panlai.com/zb_users/upload/2025/06/20250615223507174999810720257.png" // 图像的路径fillMode: Image.PreserveAspectCrop // 设置填充模式asynchronous: true // 异步加载图像// Image的status属性变化时发送statusChanged()信号onStatusChanged: {if (imageView.status === Image.Loading) {console.log("图片正在加载中...") // 在终端中打印内容} else if (imageView.status === Image.Ready) {console.log("图片加载完成")} else if (imageView.status === Image.Error) {console.log("图片加载失败")}}}// BusyIndicator控件表示一个繁忙指示器BusyIndicator {id: busyIndicatorwidth: 100 // 宽度height: 100 // 高度anchors.centerIn: parent // 锚布局，在父控件中居中running: imageView.status === Image.Loading // 是否显示}
}
BusyIndicator 用来 显示一个等待图元。BusyIndicator 的 running 属性是个布尔值，为 true 时 显示。style 属性允许你定制 BusyIndicator。默认的效果一个转圈圈的动画。