QML: How to place Repeater on top of existing Repeater?-CodePudding

As in the title: I need to place repeater on top of existing one. Actually I mean any place in that - covering previous one elements, cause then I have to control second repeater elements using keyboard (it would be game with Timer)

I have tried use anchors, and it doesn't work. I always have the second repeater exactly behind previous one elements.

BTW I have issue with all anchors in code below - it does not work as I am expecting. What am I doing wrong? Any idea, please ?

import QtQuick

Window {
    id: mainWindow
    property int wi: 640
    property int he: 500
    width: wi
    height: he
    visible: true
    title: qsTr("Game")

    Rectangle {
        id: gameWindow
        width: wi/1.6
        height: he
        anchors.right: parent
        visible: true
        color: "black"
        clip: true

        Grid {
            id: gameGrid
            columns: 25
            spacing: 0
            rows: 32

            Repeater {
                model: 600
                anchors.fill: parent

                Rectangle {
                    width: wi/40 ; height: 20
                    border.width: 2
                    color: "grey"
                }
            }

            Repeater {
                model: 10
                anchors.fill: top

                Rectangle {
                    width: wi/40 ; height: 20
                    border.width: 1
                    color: "red"
                }
            }
        }
    }
}

CodePudding user response：

You put both Repeater in the same Grid which will layout the items of both in the same Grid. To have the items of the repeaters stacked on top of each other you need to create another Grid on top of the other with the same property values and size so they align.

import QtQuick

Window {
    id: mainWindow
    property int wi: 640
    property int he: 500
    width: wi
    height: he
    visible: true
    title: qsTr("Game")

    Rectangle {
        id: gameWindow
        width: wi/1.6
        height: he
        anchors.right: parent.right
        visible: true
        color: "black"
        clip: true

        Grid {
            id: gameGrid
            columns: 25
            spacing: 0
            rows: 32
            anchors.fill: parent

            Repeater {
                model: 600

                Rectangle {
                    width: wi/40
                    height: 20
                    border.width: 2
                    color: "grey"
                }
            }
        }

        Grid {
            columns: gameGrid.columns
            spacing: gameGrid.spacing
            rows: gameGrid.rows
            anchors.fill: gameGrid

            Repeater {
                model: 10

                Rectangle {
                    width: wi/40
                    height: 20
                    border.width: 1
                    color: "red"
                }
            }
        }
    }
}

About the anchors, you used the convenience anchors.fill with an anchor line top which isn't working. Have another look at Positioning with Anchors.

There are also some convenience anchors. anchors.fill is a convenience that is the same as setting the left,right,top and bottom anchors to the left,right,top and bottom of the target item. anchors.centerIn is another convenience anchor, and is the same as setting the verticalCenter and horizontalCenter anchors to the verticalCenter and horizontalCenter of the target item.

anchors.right: parent won't work, because you need to specify a anchor line, e.g. parent.right.