Using Grid for Layouting

Files:

• examples/native/scalability/positioners/grid-layout/GridItem.qml
• examples/native/scalability/positioners/grid-layout/grid-layout.qml
• examples/native/scalability/positioners/grid-layout/grid-layout.qmlproject

Using Grid element for creating scalable layouts.

This example demonstrates how Grid element can be used for creating a scalable layout. In this example number of columns and rows of the Grid changes on orientation change.

Walkthrough

The width (itemWidth) and the height (itemHeight) of the GridItem when number of columns and rows are changed.

 property int itemWidth: Math.round((width - spacing * (columns - 1)) / columns)
 property int itemHeight: Math.round((height - spacing * (rows - 1)) / rows)

The number of columns and rows shown in the Grid changes when window.inPortrait changes.

 columns: window.inPortrait ? 1 : 2
 rows: window.inPortrait ? 6 : 3

Repeater instantiates six GridItem elements in the Grid.

 Repeater {
     model: 6

     GridItem {
         width: grid.itemWidth; height: grid.itemHeight
         text: index
     }
 }