ColumnLayout QML Type

Identical to GridLayout, but having only one column. More...

Import Statement: import QtQuick.Layouts 1.15



Detailed Description

It is available as a convenience for developers, as it offers a cleaner API.

Items in a ColumnLayout support these attached properties:

     spacing: 2

     Rectangle {
         Layout.alignment: Qt.AlignCenter
         color: "red"
         Layout.preferredWidth: 40
         Layout.preferredHeight: 40

     Rectangle {
         Layout.alignment: Qt.AlignRight
         color: "green"
         Layout.preferredWidth: 40
         Layout.preferredHeight: 70

     Rectangle {
         Layout.alignment: Qt.AlignBottom
         Layout.fillHeight: true
         color: "blue"
         Layout.preferredWidth: 70
         Layout.preferredHeight: 40

Read more about attached properties here.

See also RowLayout, GridLayout, and Column.

Property Documentation

layoutDirection : enumeration

This property holds the layout direction of the column layout - it controls whether items are laid out from left ro right or right to left. If Qt.RightToLeft is specified, left-aligned items will be right-aligned and right-aligned items will be left-aligned.

Possible values:

  • Qt.LeftToRight (default) - Items are laid out from left to right.
  • Qt.RightToLeft - Items are laid out from right to left

This property was introduced in QtQuick.Layouts 1.1.

See also GridLayout::layoutDirection and RowLayout::layoutDirection.

spacing : real

This property holds the spacing between each cell. The default value is 5.