Qt Reference Documentation

Scalability: Using Row for Layouting


Using Row for creating scalable layouts.

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


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

 property int itemCount: window.inPortrait ? 2 : 4
 property int rectangleWidth: Math.round(width / itemCount)

Repeater instantiates four Rectangle elements in the Row.

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

     Rectangle {
         width: row.rectangleWidth; height: row.height
         color: modelData
         border.color: "white"
         radius: 15