Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-98991

Add example to clear up common layout confusion

    XMLWordPrintable

Details

    • 21455028f (dev), a60639e6f (6.5)

    Description

      An example of a common question about layouts can be seen below:

      import QtQuick
      import QtQuick.Controls
      import QtQuick.Layouts
      
      ApplicationWindow {
          id: root
          width: 300
          height: 300
          visible: true
      
          RowLayout {
              anchors.fill: parent
              ColumnLayout {
                  Rectangle {
                      color: "tomato";
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                  }
                  RowLayout {
                      Rectangle {
                          color: "navajowhite"
                          Layout.fillWidth: true
                          Layout.fillHeight: true
                      }
                      Rectangle {
                          color: "darkseagreen"
                          Layout.fillWidth: true
                          Layout.fillHeight: true
                      }
                  }
              }
              ColumnLayout {
                  Rectangle {
                      color: "lightpink"
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                  }
                  Rectangle {
                      color: "slategray"
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                  }
                  Rectangle {
                      color: "lightskyblue"
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                  }
              }
          }
      }
      

      The two ColumnLayouts both set Layout.fillWidth: true, so it's natural to think that they would both get the same width. However, because of the default 5 pixel spacing between the items in the RowLayout, the implicitWidth of the first ColumnLayout becomes larger, leaving less room for the second one. So in this case you can either:

      1. Set the spacing of the RowLayout to 0, or;
      2. Set preferredWidth to equal values on both ColumLayouts.

      We should add a section to the documentation explaining stuff like this.

      Attachments

        Issue Links

          Activity

            People

              paulwicking Paul Wicking
              mitch_curtis Mitch Curtis
              Votes:
              2 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: