在 QML 中创建自定义组件的多个实例

Question

我目前正在使用 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}
        }
}

Answer 1

根据您的代码，所有项目都居中，因此它们很可能重叠。另一方面，Dice Item 的根节点没有大小，因此很难管理它们。

在这种情况下，根是矩形并且中继器在行（或列或其他类似组件）内更好：

Dice.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
            }

        }

    }

}

在 QML 中创建自定义组件的多个实例

Create multiple instance of custom component in QML

qt

qml