Unsolved How does RowLayout/ColumnLayout work
-
Hi everyone,
basically I want to nest some RowLayouts and ColumsLayout. To be more specific I want two ColumsLayouts in one RowLayout, which take as much space as they can (so every columLayout has the same width of 50%). But it seems that the width is depent from what is actually in the ColumnLayout, which is not what I want.
So in this example (I Instead of the secondcolumn, I took a rectangle), the red square has a bigger width, because the green rectangles have a preferred width of 300. As the ColumLayout is set to maximize the width, this shouldn't matter in my opinion.
RowLayout { Layout.fillHeight: true Layout.fillWidth: true ColumnLayout { Layout.fillHeight: true Layout.fillWidth: true Rectangle { Layout.preferredWidth: 300 Layout.preferredHeight: 200 color: "green" } Rectangle { Layout.preferredWidth: 300 Layout.preferredHeight: 200 color: "green" } Item { Layout.fillHeight: true } } Rectangle { Layout.fillHeight: true Layout.fillWidth: true color: "red" } }
If i set one of these green rectangles to fill out the complete space, suddently the red quare is almost gone.
Why isn't the width determined by the columnLayout?
So there is a total width of 1000. Every Column should have a width of 500 (on this case the one column and the one rectangle). And if a rectangle in this Column is set to fill out maximum width, this should mean 500 at most and not 1000. -
I created a more simple and complete example
ApplicationWindow { width: 1200; height: 600 visible: true RowLayout { anchors.fill: parent ColumnLayout { Rectangle { //Layout.preferredWidth: 300 Layout.fillWidth: true Layout.preferredHeight: 200 color: "green" } Rectangle { Layout.fillWidth: true Layout.preferredHeight: 200 color: "green" } Rectangle { Layout.fillWidth: true Layout.preferredHeight: 200 color: "green" } } Rectangle { Layout.fillWidth: true Layout.fillHeight: true color: "red" } } }
Everything works fine, but if add that line in the first Rectangle "Layout.preferredWidth: 300" and remove the one after that "Layout.fillWidth: true", suddently the other Rectangles use the complete size of the window. What is the reason for that?
-
Does nobody has an idea? I just found out that the behavior changes if you set prefferedHeight/Width in those elements, where fillWidth/height is true. It seems like I did not understand the basic concept behind Layouts ... I thought if I set fillWidth/height to true, the size is always maximum if not explicitly forbidden.
-
Hi @Leon_2001, Layouts are just a containers where you just dump some stuffs which arrange themselves accordingly (row and columns). Its children are always dependent on the size of the layouts itself . I have written a small code which may help you
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.12Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")RowLayout{ id: mainLayout width: parent.width height: parent.height ColumnLayout{ id:firstColumn width: parent.width * 0.5 height: parent.height Rectangle{ anchors.fill: parent color: "red" } } ColumnLayout{ id: secondColumn width: parent.width * 0.5 height: parent.height Rectangle{ anchors.fill: parent color: "blue" } } }
}
You can hardcode the width and height of column layouts orelse you can just multiply the height of the row layout to get preffered width and height of your layout