How does RowLayout/ColumnLayout work

Leon_2001

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.

Leon_2001

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?

Leon_2001

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.

Adithya

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.12

Window {
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