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

Improve QtQuick Layouts documentation on spans and how to have ratios/weights

    XMLWordPrintable

Details

    • Suggestion
    • Resolution: Fixed
    • P2: Important
    • 6.5.0, 6.6.0
    • None
    • Quick: Layouts
    • None
    • 21455028f (dev), a60639e6f (6.5)

    Description

      Some people think that altering spans will increase the implicit size of a cell in a GridLayout (sometimes they try to use spans in order to achieve ratios), e.g:

      https://stackoverflow.com/questions/50651369/qml-layouts-how-to-give-weights-to-items-in-a-row-or-column-layout

       

      Other times, they bind the items size hints to the parent layout e.g:

      GridLayout {
          id: grid
          Rectangle {
              Layout.fillWidth: true
              Layout.preferredWidth: grid.width/3
          }
          Rectangle {
              Layout.fillWidth: true
              Layout.preferredWidth: grid.width/3
          }
          Rectangle {
              Layout.fillWidth: true
              Layout.preferredWidth: grid.width/3
          }
      }

      Which basically will form a circular dependency loop.

       

      The documentation should have a section covering these things:

      1. Spans (and how unneeded spans and empty columns are ignored)

      In a grid layout, empty rows or columns are ignored.
      This means that you cannot use spans to specify stretch ratios. For instance:

      GridLayout {
          columns: 4
          width: 640
          height: 480
      
          Rectangle {
              color: "red"
              Layout.fillHeight: true
              Layout.fillWidth: true
              Layout.columnSpan: 1
          }
          Rectangle {
              color: "green"
              Layout.fillHeight: true
              Layout.fillWidth: true
              Layout.columnSpan: 2
          }
          Rectangle {
              color: "blue"
              Layout.fillHeight: true
              Layout.fillWidth: true
              Layout.columnSpan: 1
          } 

      Some people assume the green Rectangle will become double as wide as the two other Rectangles. This assumption is wrong. (It might come from the fact that some believe that the rows and columns are distributed uniformly (i.e. having the same size)). However, the sizes of the rows and columns are not uniform - they depend on their contents, a column with a wide Button will have a larger preferredWidth than a column with a narrow Button. Similarly, a column with no items will have a size of 0, and will therefore be ignored. Therefore, you cannot add a span to an item in order for it to stretch differently.

      1. How the size hints of items can be (ab)used in order to specify size weights/ratios on each item
      2. How each item is aligned inside a cell (alignment gets first effective when the cell is larger than the items maximum size)
      3. Emphasize that size hints should never depend on "external" factors! (such as the above snippet).

       

       

      Attachments

        Issue Links

          Activity

            People

              paulwicking Paul Wicking
              smd Jan Arve
              Votes:
              1 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: