Create multiple instance of custom component in QML

Question

I'm currently learning QML with Python and PySide. 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

//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?

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

user_6622587 · Answer

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.

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

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
            }

        }

    }

}

Create multiple instance of custom component in QML

1 Answers