Home · All Classes · All Functions · Overviews

QML Grid Element Reference

[Inherits Item]

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

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

The Grid defaults to using four columns, and as many rows as are necessary to fit all the 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, or use anchors on a child of a positioner, then the positioner may exhibit strange behaviour.


Property Documentation

add : Transition

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.

Added can mean that either the object has been created or reparented, and thus is now a child or the positioner, or that 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.

When the columns property is set the Grid will always have that many columns. Note that if you do not have enough items to fill this many columns some columns will be of zero width.


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.

When the rows property is set the Grid will always have that many rows. Note that if you do not have enough items to fill this many 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.



Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0