在 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 的根没有大小，因此很难管理它们。

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

骰子.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
            }

        }

    }

}

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

        }

    }

}