[英]Create multiple instance of custom component in QML
I'm currently learning QML with Python and PySide.我目前正在使用 Python 和 PySide 学习 QML。 So I have created a custom item in QML that display the image of a dice face that have a property to show a number from 1 to 6. That part works and I would like to be able to instanciate the Dice a couple times in a parent QML file
因此,我在 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
}
}
}
}
}
I would like to generate a couple of these Dice but there is only one instance that appears.我想生成几个这样的骰子,但只有一个实例出现。 How would I generate a grid with my 6 Dice that would appear?
我将如何用我的 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}
}
}
According to your code, all the items were centered so most likely they overlap.根据您的代码,所有项目都居中,因此它们很可能重叠。 On the other hand, the root of Dice Item has no size so it will be difficult to manage them.
另一方面,Dice Item 的根没有大小,因此很难管理它们。
In this case it is better that the root is the Rectangle and that the Repeater is inside a Row (or Column or another similar component):在这种情况下,根是矩形并且中继器在行(或列或其他类似组件)内更好:
Dice.qml骰子.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
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.