Unsolved Nested QML Layout fillWidth
-
Hi there, I'm sorry I imagine this is a common noob question, but I wasn't able to find an answer in my searching.
In the example layout below, I want
nestedRowLayout
to take up a fixed width of 100, and the red rectangle to fill up the remaining space.
Then I want the green and blue rectangles to have a fixed width of 20, and the yellow rectangle to fill up the remaining space innestedRowLayout
(40 in this case, after accounting for the margins).What actually happens is that the yellow rectangle greedily tries to take up as much space as possible without obeying the preferredWidth of
nestedRowLayout
.I can get the intended behaviour by using
Layout.maximumWidth: 100
instead ofpreferredWidth
innestedRowLayout
, but this somehow seems wrong to me, as something might cause that layout to take a value smaller than 100.Am I thinking about this wrong? Is there a more 'correct' way to do this?
import QtQuick 2.7 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.12 ApplicationWindow { id : mainWindow minimumWidth : 100 minimumHeight : 300 maximumWidth : 800 maximumHeight : 500 Item { id: mainView anchors.fill: parent ColumnLayout { anchors.fill: parent // top RowLayout { Layout.preferredWidth: parent.width Layout.preferredHeight: 50 spacing: 20 Rectangle { Layout.fillWidth: true Layout.preferredHeight: parent.height color: "red" } Rectangle { color: "orange" Layout.preferredWidth: 10 Layout.preferredHeight: parent.height } RowLayout { id: nestedRowLayout Layout.preferredWidth: 100 Layout.preferredHeight: parent.height spacing: 10 Rectangle { color: "yellow" Layout.fillWidth: true Layout.preferredHeight: parent.height } Rectangle { color: "green" Layout.preferredWidth: 20 Layout.preferredHeight: parent.height } Rectangle { color: "blue" Layout.preferredWidth: 20 Layout.preferredHeight: parent.height } } } // bottom Rectangle { Layout.preferredWidth: parent.width Layout.fillHeight: true color: "indigo" } } } }
-
You may be better off using GridLayout rather than ColumnLayout.
I have an example of how to use GridLayout which may help you to achieve your goal;
https://forum.qt.io/topic/108774/gridlayout-columnspan-woes/5