GridLayout with equal sized cells

  • Hi all,

    is there a way to force a GridLayout to keep the cells equally sized so I can use it as a real layout grid?

    GridLayout {
      width: 100
      height: 100
      columns: 5
      rows: 5
      columnSpacing: 0
      rowSpacing: 0
      Rectangle {
        Layout.fillWidth: true
        Layout.fillHeight: true
        Layout.column: 2
        Layout.row: 1

    The rectangle in the example should sit at x = 40 and y = 20 and the size should be 20x20.

  • I know this is old, but someone might find this useful.

    You don't set the size of a GridLayout by setting rows and columns. The only purpose of rows or columns is to tell the layout engine when to wrap to the next column or row when auto-assigning row and column numbers. The GridLayout ultimately derives its size from the highest numbered row and column occupied.

    Furthermore, you have to actually put something into every row and column that has its fillWidth and fillHeight set to "inflate" those rows and columns to the desired size. You can do that by filling unused positions with dummy Item objects that have the necessary Layout properties. In fact, you only need to ensure that at least one position in each row and column is so occupied in order to force the layout.

    It's pretty easy to write your own fixed grid object in QML, derived from Item, or Rectangle if you want a background color. Its Component.onCompleted handler can iterate through its children and set the position and size of its children based on their Layout.column and Layout row properties, along with spacing and margins properties on your object. You could even support Layout.columnSpan and Layout rowSpan with some simple arithmetic.

  • I was trying to avoid the things you supposed to get GridLayout to do what I want. In the end I did what you supposed in your last paragraph, I wrote my own TableLayout component.

Log in to reply

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