Qt Reference Documentation

QML Grid Element

The Grid item positions its children in a grid. More...

Inherits Item

  • List of all members, including inherited members
  • Properties

    Detailed Description

    The Grid item positions its child items so that they are aligned in a grid and are not overlapping.

    Spacing can be added between child items. It also provides for transitions to be set when items are added, moved, or removed in the positioner. Adding and removing apply both to items which are deleted or have their position in the document changed so as to no longer be children of the positioner, as well as to items which have their opacity set to or from zero so as to appear or disappear.

    A Grid defaults to four columns, and as many rows as are necessary to fit all child items. The number of rows and/or the number of columns can be constrained by setting the rows or columns properties. The grid positioner calculates a grid with rectangular cells of sufficient size to hold all items, and then places the items in the cells, going across then down, and positioning each item at the (0,0) corner of the cell. The below example demonstrates this.

     Grid {
         columns: 3
         spacing: 2
         Rectangle { color: "red"; width: 50; height: 50 }
         Rectangle { color: "green"; width: 20; height: 50 }
         Rectangle { color: "blue"; width: 50; height: 20 }
         Rectangle { color: "cyan"; width: 50; height: 50 }
         Rectangle { color: "magenta"; width: 10; height: 10 }
     }

    Note that the positioner assumes that the x and y positions of its children will not change. If you manually change the x or y properties in script, bind the x or y properties, use anchors on a child of a positioner, or have the width or height of a child depend on the position of a child, then the positioner may exhibit strange behaviour. If you need to perform any of these actions, consider positioning the items without the use of a Grid.

    Items with a width or height of 0 will not be positioned.

    See also Flow and Positioners example.

    Property Documentation

    This property holds the transition to apply when adding an item to the positioner. The transition is only applied to the added item(s). Positioner transitions will only affect the position (x,y) of items, as that is all the positioners affect. To animate other property change you will have to do so based on how you have changed those properties.

    An object is considered to be added to the positioner if it has been created or reparented and thus is now a child or the positioner, or if the object has had its opacity increased from zero, and thus is now visible.


    columns : int

    This property holds the number of columns in the grid.

    If the grid does not have enough items to fill the specified number of columns, some columns will be of zero width.


    This property holds the flow of the layout.

    Possible values are:

    • Grid.LeftToRight (default) - Items are positioned next to to each other from left to right, then wrapped to the next line.
    • Grid.TopToBottom - Items are positioned next to each other from top to bottom, then wrapped to the next column.

    move : Transition

    This property holds the transition to apply when moving an item within the positioner. Positioner transitions will only affect the position (x,y) of items.

    This can happen when other items are added or removed from the positioner, or when items resize themselves.

     Grid {
         move: Transition {
             NumberAnimation {
                 properties: "x,y"
                 ease: "easeOutBounce"
             }
         }
     }

    rows : int

    This property holds the number of rows in the grid.

    If the grid does not have enough items to fill the specified number of rows, some rows will be of zero width.


    spacing : int

    spacing is the amount in pixels left empty between each adjacent item, and defaults to 0.

    The below example places a Grid containing a red, a blue and a green rectangle on a gray background. The area the grid positioner occupies is colored white. The top positioner has the default of no spacing, and the bottom positioner has its spacing set to 2.


    X

    Thank you for giving your feedback.

    Make sure it is related to this specific page. For more general bugs and requests, please use the Qt Bug Tracker.