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

uj5u.com熱心網友回復：

根據您的代碼，所有專案都居中，因此它們很可能重疊。另一方面，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
            }

        }

    }

}

主檔案

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
            }

        }

    }

}

標籤：qt 质量管理器

上一篇：使用帶有Qt的包裝類進行多次get/post呼叫

下一篇：Qt、QML、ColorImage不是型別