07. Repeater.md
一、Repeater
Repeater 是一个非常特别又非常好用的类，它用来创建多个基于 Item 的组件，扔给它的父（通常是定位器或布局管理器）来管理。Repeater 有三个属性，count 指示它 创建了多少个基于 Item 的对象，model 指定 数据模型，delegate 是 待实例化的组件。
我们可以在终端中使用 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
Repeater 对象会在自己实例化后一次性地创建由 model 属性决定的所有 Item。model 属性可以取下列值：
- 数字：当
model为数字时，指示Repeater创建特定数量的组件，此时在delegate组件内可以访问index属性。 - 字符串列表：当使用字符串列表作为
model时，Repeater创建的Item数量由列表长度决定，在delegate内可以通过modelData访问字符串对象。 - 对象列表：使用对象列表作为
model与使用字符串列表类似，只是modelData代表model中的对象。 ListModel等常见的model：model也可以是ListModel或者QAbstractItemModel的派生类。此时在delegate内可以通过role-name访问model内的数据。
【1】、model 为数字
我们新建一个 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()函数确保主循环安全结束
我们新建一个 template.qml 文件。
import QtQuick.Window
// Window控件表示一个顶级窗口
// 在QML中，元素是通过大括号{}内的属性来配置的。
Window {
width: 800 // 窗口的宽度
height: 600 // 窗口的高度
visible: true // 显示窗口
color: "lightgray" // 窗口的背景颜色
// 定义一个Flow，用于流式布局
Flow {
width: parent.width // 宽度
height: parent.height // 高度
anchors.centerIn: parent // 将中心的锚点定位到父元素的
spacing: 100 // 用于设置子元素之间的间隔
// Repeater是一个用于根据模型（通常是列表或数组）动态生成一组子元素的有用工具
Repeater{
// 定义了数据源，通常是一个列表或数组。
model: 18 // 设置重复的次数
// 定义了如何显示模型中的每个项目，它是一个包含要实例化的 QML 元素的组件。
delegate: Rectangle {
width: 100
height: 100
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
}
}
}
}
【2】、model 为字符串列表
修改 template.qml 文件的内容。
import QtQuick.Window
// Window控件表示一个顶级窗口
// 在QML中，元素是通过大括号{}内的属性来配置的。
Window {
width: 800 // 窗口的宽度
height: 600 // 窗口的高度
visible: true // 显示窗口
color: "lightgray" // 窗口的背景颜色
// 定义一个Row，用于水平布局
Row {
anchors.centerIn: parent // 将中心的锚点定位到父元素的
spacing: 100 // 用于设置子元素之间的间隔
// Repeater是一个用于根据模型（通常是列表或数组）动态生成一组子元素的有用工具
Repeater{
// 定义了数据源，通常是一个列表或数组。
model: ["Hello", "Qt", "Quick"]
// 定义了如何显示模型中的每个项目，它是一个包含要实例化的 QML 元素的组件。
delegate: Text {
font.pointSize: 32
font.bold: true
color: "#99CCFF"
text: modelData
}
}
}
}
【3】、model 为对象列表
修改 template.qml 文件的内容。
import QtQuick.Window
// Window控件表示一个顶级窗口
// 在QML中，元素是通过大括号{}内的属性来配置的。
Window {
width: 800 // 窗口的宽度
height: 600 // 窗口的高度
visible: true // 显示窗口
color: "lightgray" // 窗口的背景颜色
// 定义一个Row，用于水平布局
Column {
anchors.centerIn: parent // 将中心的锚点定位到父元素的
spacing: 10 // 用于设置子元素之间的间隔
// Repeater是一个用于根据模型（通常是列表或数组）动态生成一组子元素的有用工具
Repeater{
// 定义了数据源，通常是一个列表或数组。
model: [
{"name": "小樱", "age": 10},
{"name": "美琴", "age": 14},
{"name": "夏娜", "age": 15},
]
// 定义了如何显示模型中的每个项目，它是一个包含要实例化的 QML 元素的组件。
delegate: Row {
spacing: 100 // 用于设置子元素之间的间隔
Text {
font.pointSize: 32
font.bold: true
color: "#99CCFF"
text: modelData.name
}
Text {
font.pointSize: 32
font.bold: true
color: "#99CCFF"
text: modelData.age
}
}
}
}
}
在
delegate属性内将modelData作为对象使用，直接访问它的属性。
【4】、 model 为 ListModel
修改 template.qml 文件的内容。
import QtQuick.Window
// Window控件表示一个顶级窗口
// 在QML中，元素是通过大括号{}内的属性来配置的。
Window {
width: 800 // 窗口的宽度
height: 600 // 窗口的高度
visible: true // 显示窗口
color: "lightgray" // 窗口的背景颜色
// 定义一个Row，用于水平布局
Column {
anchors.centerIn: parent // 将中心的锚点定位到父元素的
spacing: 10 // 用于设置子元素之间的间隔
// Repeater是一个用于根据模型（通常是列表或数组）动态生成一组子元素的有用工具
Repeater{
// 定义了数据源，通常是一个列表或数组。
model: ListModel {
ListElement {name: "小樱"; age: 10}
ListElement {name: "美琴"; age: 14}
ListElement {name: "夏娜"; age: 15}
}
// 定义了如何显示模型中的每个项目，它是一个包含要实例化的 QML 元素的组件。
delegate: Row {
spacing: 100 // 用于设置子元素之间的间隔
Text {
font.pointSize: 32
font.bold: true
color: "#99CCFF"
text: name
}
Text {
font.pointSize: 32
font.bold: true
color: "#99CCFF"
text: age
}
}
}
}
}
浙公网安备 33010602011771号