In this code, some items are invisible at first. I want them to be visible on the click of a button at the place where they have been placed by me.
In order to leave space for them, I have placed the other item where it will be shown when hidden options will be visible.
My problem is that GridLayout
does not obey the following cell positions set in code when other items are invisible.
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
Window {
visible: true
height: 500; width: 500
GridLayout {
id: gridLayout
property bool secondScreenOptionsVisible: false
property int hmmiButtonRow: 0
property int hmmiButtonCol: 0
Rectangle {
id: hmmi; visible: gridLayout.secondScreenOptionsVisible
Layout.row: gridLayout.hmmiButtonRow; Layout.column: gridLayout.hmmiButtonCol;
height: 50; width: 50; color: "pink";
Layout.alignment: Qt.AlignTop
Text { text: "HMMI"; anchors.centerIn: parent }
}
property int optionsButtonRow: 1
property int optionsButtonCol: 0
Rectangle {
id: optionsButton; visible: gridLayout.secondScreenOptionsVisible
Layout.row: gridLayout.optionsButtonRow; Layout.column: gridLayout.optionsButtonCol;
height: 50; width: 50; color: "red"
Layout.alignment: Qt.AlignTop
Text { text: "Options..."; anchors.centerIn: parent }
}
property int flipperControlRow: 3
property int flipperControlCol: 0
Rectangle {
id: flipperControl;
Layout.row :gridLayout.flipperControlRow; Layout.column: gridLayout.flipperControlCol;
height: 200; width: 50;
color: "brown";
Layout.rowSpan: 4
Layout.alignment: Qt.AlignTop
Text { text: "Flipper"; anchors.centerIn: parent }
}
}
}
Output:
When all the items are visible:
When other two items are hidden, the GridLayout
does not obey the rules.
I want GridLayout
to obey the cell positions set by me, irrespective of whether other items are visible or not.
Please help.
The doc says for GridLayout
that:
[...] It is similar to the widget-based QGridLayout. All visible children of the GridLayout element will belong to the layout. [...].
So what you are seeing is a direct consequence of the implementation approach followed by developers. Indeed a change in visibility triggers Item
s repositioning, as can be seen in this code path.
Instead of considering visible
property you can use opacity
property: the non-opaque Item
s are taken in account by the layout, resulting in the expected visible behaviour. See for instance this simple example:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
Window {
visible: true
height: 400; width: 400
GridLayout {
anchors.fill: parent
id: gridLayout
rows: 3
columns: 3
Repeater {
id: rep
model: 9
Rectangle {
color: "black"
Layout.preferredWidth: 100
Layout.preferredHeight: 100
Layout.alignment: Qt.AlignCenter
opacity: index === rep.count - 1
}
}
}
}
Mind that non-opaque Item
s are still rendered, differently from invisible ones, with a varying degree of impact over performances, depending on your actual use case.