Qt Reference Documentation

Scalability: Using Column for Layouting

Files:

Creating scalable layouts with the Column element.

This example demonstrates how Column element can be used for creating a scalable layout. In this example number of items shown in the Column changes on orientation change.

Walkthrough

The number of visible Rectangle elements (itemCount) shown in the Column changes when window.inPortrait changes. In addition, the height (rectangleHeight) of a Rectangle item shown in the Column changes when number of itemCount changes.

 property int itemCount: window.inPortrait ? 2 : 4
 property int rectangleHeight: Math.round(column.height / itemCount)

Repeater instantiates four Rectangle elements in the Column.

 Repeater {
     model: ["red", "lightsteelblue", "green", "orange"]

     Rectangle {
         width: column.width; height: column.rectangleHeight
         color: modelData
         border.color: "white"
         radius: 15
     }
 }