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
.