qt - 在 QML 中创建自定义组件的多个实例
问题描述
我目前正在使用 Python 和 PySide 学习 QML。因此,我在 QML 中创建了一个自定义项目,该项目显示骰子面的图像,该图像具有显示从 1 到 6 的数字的属性。该部分有效,我希望能够在父项中多次实例化骰子QML 文件
//Dice.qml
import QtQuick
import QtQuick.Layouts
Item {
property int num_dots
id: container
function getDots(num) {
var data;
switch (num) {
case 1:
data = ["white", "white", "white","white", "black", "white","white", "white", "white"];
break;
case 2:
data = ["black", "white", "white", "white","white", "white","white", "white", "black"];
break;
case 3:
data = ["black", "white", "white", "white","black", "white","white", "white", "black"];
break;
case 4:
data = ["black", "white", "black","white", "white", "white","black", "white", "black"];
break;
case 5:
data = ["black", "white", "black","white", "black", "white","black", "white", "black"];
break;
case 6:
data = ["black", "white", "black","black", "white", "black","black", "white", "black"];
break;
default:
data = ["white", "white", "white", "white", "white", "white", "white", "white", "white"];
}
return data;
}
Rectangle {
width: 150
height: 150
color: "white"
border.color: "black"
border.width: 5
radius: 10
anchors.centerIn: parent
GridLayout {
rows: 3;
rowSpacing: 5;
columns: 3;
columnSpacing: 5;
anchors.centerIn: parent
Repeater {
model: container.getDots(container.num_dots)
Rectangle {
width: 40
height: 40
color: modelData
radius: 20
}
}
}
}
}
我想生成几个这样的骰子,但只出现一个实例。我将如何用我的 6 个骰子生成一个网格?
import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
Window {
id: root
width: 640
height: 480
visible: true
title: qsTr("Dice")
Repeater {
model: 6
Dice {num_dots: index+1;anchors.centerIn: parent}
}
}
解决方案
根据您的代码,所有项目都居中,因此它们很可能重叠。另一方面,骰子项目的根没有大小,因此很难管理它们。
在这种情况下,根最好是 Rectangle,Repeater 在 Row(或 Column 或其他类似组件)内:
骰子.qml
import QtQuick
import QtQuick.Layouts
Rectangle {
id: root
property int num_dots
width: 150
height: 150
color: "white"
border.color: "black"
border.width: 5
radius: 10
function getDots(num) {
var data;
switch (num) {
case 1:
data = ["white", "white", "white", "white", "black", "white", "white", "white", "white"];
break;
case 2:
data = ["black", "white", "white", "white", "white", "white", "white", "white", "black"];
break;
case 3:
data = ["black", "white", "white", "white", "black", "white", "white", "white", "black"];
break;
case 4:
data = ["black", "white", "black", "white", "white", "white", "black", "white", "black"];
break;
case 5:
data = ["black", "white", "black", "white", "black", "white", "black", "white", "black"];
break;
case 6:
data = ["black", "white", "black", "black", "white", "black", "black", "white", "black"];
break;
default:
data = ["white", "white", "white", "white", "white", "white", "white", "white", "white"];
}
return data;
}
GridLayout {
rows: 3
rowSpacing: 5
columns: 3
columnSpacing: 5
anchors.centerIn: parent
Repeater {
model: root.getDots(root.num_dots)
Rectangle {
width: 40
height: 40
color: modelData
radius: 20
}
}
}
}
main.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
Window {
id: root
width: 640
height: 480
visible: true
title: qsTr("Dice")
Row{
anchors.fill: parent
Repeater {
model: 6
Dice {
num_dots: index + 1
}
}
}
}
推荐阅读
- python - 已改变值的字典
- dask - 如何在 dask scheduler 插件中获取任务结果
- c# - C#从字节数组中提取位范围
- c++ - Q: 如何在 IO 线程的浏览器进程中获取 Chromium 框架层级(referrers)
- r - 如何对 AR 模型进行 RESET 测试?
- c# - 我应该在 C# 中使用泛型参数还是类型参数?
- java - 如何通过最小化价值来解决背包问题?
- c++ - 有没有办法从glm中的视图矩阵中提取变换矩阵?
- python - 如何在 sklearn 中为 SpectralCluster 使用曼哈顿距离
- sql - Go 应用程序在 FLOATS 上使用 GROUP_CONCAT 进行 SQL 查询返回 []uint8 而不是实际的 []float64