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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.