Introducing Qt Quick Layouts

If you want to create a QML application where the UI responds well to window resizing, the toolbox that Qt Quick offers has been somewhat limited. Qt 5.1 will offer the new Qt Quick types RowLayout, ColumnLayout and GridLayout for this purpose.

Background

Up until Qt 5.1, positioners and anchors have been the only Qt Quick tools available for arranging items in the UI.

Positioners are convenient for adding many items, but not always helpful for creating a resizable UI since they (as the name implies - surprise, surprise) only positions the items - the widths and heights are kept the same.

Anchors allows a bit more flexibility, at the price of verbosity. With anchors you can make an item stretch by binding one edge to the corresponding edge of the parent, and you set up a similar binding on the items' opposite edge. However, you cannot make several items distribute themselves evenly if the window is resized.

The last option is to do the manual layouting yourself. This offers great flexibility, but it can be verbose, cumbersome and error-prone. During the development of Qt Quick Controls, we wanted to improve this and decided to provide a better and more convenient layout system.

import QtQuick.Layouts 1.0

By including the above import you will have RowLayout, ColumnLayout and GridLayout available in your toolbox. These layouts behave very much like their sisters found in the QtWidgets module: QHBoxLayout, QVBoxLayout and QGridLayout. It also tries to match the API of the Row, Grid and Column QML elements where it makes sense. So, if you are familiar with any of these APIs, you will find Qt Quick Layouts easy to grasp.

Alignment of items inside a cell can be specified with the Layout.alignment property.

Spans across rows or columns can be specified with the Layout.rowSpan and Layout.columnSpan properties.

Grid coordinates can be specified with the Layout.row and Layout.column properties.

Resizable items can be specified with the Layout.fillWidth and Layout.fillHeight properties. This was the main goal of the Qt Quick Layouts.

Minimum, Preferred and Maximum sizes can be specified with Layout.minimumWidth, Layout.preferredWidth and Layout.maximumWidth  properties ("Width" can be replaced with "Height" for specifying similar constraints to the height).

Example

ToolBar {

    Row {

        id: row

        spacing: 2

        anchors.verticalCenter: parent.verticalCenter

        ToolButton { iconSource: "images/go-previous.png" }

        ToolButton { iconSource: "images/go-next.png" }

    }

    Slider {

        anchors.left: row.right

        anchors.leftMargin: 2

        anchors.verticalCenter: parent.verticalCenter

        anchors.right: parent.right

    }

}

ToolBar {

    RowLayout {

        anchors.fill: parent

        spacing: 2

        ToolButton { iconSource: "images/go-previous.png" }

        ToolButton { iconSource: "images/go-next.png" }

        Slider { Layout.fillWidth: true }

    }

}