Qt Reference Documentation

Scalability: Using Column for Layouting


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.


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