How visual objects fit in the screen in QML? - qt

Question

This is my QML code:
import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Layouts 1.3
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
GridLayout {
anchors.centerIn: parent
anchors.margins: 8
rowSpacing: 5
columnSpacing: 5
columns: 4
Repeater {
model: 12
Rectangle {
width: 100 / Screen.devicePixelRatio
height: 100 / Screen.devicePixelRatio
color: 'blue'
Text { anchors.centerIn: parent; text: index + 1; color: 'white' }
}
}
}
}
If I set model of Repeater is 12, the view is good like this:
But if I set model of Repeater is 36+ I get this view:
I want all rectangles to be sized and aligned according to the screen / window size. I want any rectangle doesn't overflow invisible space.
How can I do it?

Answer 1

f you want it to occupy all the vertical space available then you must make a calculation of the height of each rectangle:
import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Layouts 1.3
Window {
id: win
visible: true
width: 640
height: 480
title: qsTr("Hello World")
GridLayout {
id: gl
anchors.centerIn: parent
anchors.margins: 8
rowSpacing: 5
columnSpacing: 5
columns: 4
readonly property real heighItem : {
var rowCountEffective = Math.round(repeater.count/gl.columns)
var heightEffective = win.height-rowCountEffective*gl.rowSpacing - gl.anchors.topMargin -gl.anchors.bottomMargin
return heightEffective/(rowCountEffective * Screen.devicePixelRatio)
}
Repeater {
id: repeater
model: 50
Rectangle {
width: 100 / Screen.devicePixelRatio
height: gl.heighItem
color: 'blue'
Text { anchors.centerIn: parent; text: index+1; color: 'white' }
}
}
}
}