在qml中创建一个6x4网格

Question

我正在尝试创建一个由正方形组成的网格。它是一个6X4网格。我用来制作网格的代码如下

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.Window 2.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Mini Keno")
    ColumnLayout {
        spacing: 1
        Item {
            Row {
                spacing: 1
                Repeater {
                    id: mmm
                    model: 5
                    Rectangle {
                        id: imgl
                        width: 50
                        height: 50
                        color: "#4286f4"
                        property string src: ""
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                parent.color = "4286f4"
                                parent.color = "#2345F6"
                            }
                        }
                    }
                }
            }
        }
        Item {
            Row {
                spacing: 1
                Repeater {
                    id: mm2
                    model: 5
                    Rectangle {
                        id: img2
                        width: 50
                        height: 50
                        color: "#4286f4"
                        property string src: ""
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                parent.color = "4286f4"
                                parent.color = "#2345F6"
                            }
                        }
                    }
                }
            }
        }
    }
}

这段代码是我试图创建两行网格，但另一行是不可见的。那么如何解决方格可点击的网格问题呢。另外，如何将网格放在窗口中间？

Answer 1

Qazxswpoi缺少height和width属性，因此物品的高度和宽度均为零。所以第二行与第一行重叠。

使用锚点使布局在中心，即Item

---

anchors.centerIn: parent

---

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.Window 2.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Mini Keno")
    ColumnLayout {
        anchors.centerIn: parent  // place layout in center
        spacing: 1
        height: 100
        Item {
            width: 300  // widht of item
            height: 50  // height of item
            Row {
                spacing: 1
                Repeater {
                    id: mmm
                    model: 5
                    Rectangle {
                        id: imgl
                        width: 50
                        height: 50
                        color: "#4286f4"
                        property string src: ""
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                parent.color = "4286f4"
                                parent.color = "#2345F6"
                            }
                        }
                    }
                }                
            }            
        }
        Item {
            width: 300  // widht of item
            height: 50  // height of item
            Row {
                spacing: 1
                Repeater {
                    id: mm2
                    model: 5
                    Rectangle {
                        id: img2
                        width: 50
                        height: 50
                        color: "#4286f4"
                        property string src: ""
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                parent.color = "4286f4"
                                parent.color = "#2345F6"
                            }
                        }
                    }
                }

            }

        }
    }
}