Позиционеры элементов

Позиционеры — это контейнерные элементы, которые управляют позициями элементов в декларативном пользовательском интерфейсе. Позиционеры ведут себя аналогично менеджерам компоновки, используемым со стандартными виджетами Qt, за исключением того, что они также являются контейнерами.

Позиционеры упрощают работу с многими элементами, когда они должны быть расположены в регулярной компоновке.

Qt Quick Layouts также могут использоваться для размещения элементов Qt Quick в пользовательском интерфейсе. Они управляют как позициями, так и размерами элементов в декларативном пользовательском интерфейсе и хорошо подходят для масштабируемых пользовательских интерфейсов.

Позиционеры

В стандартном наборе графических типов Qt Quick предоставляется набор стандартных позиционеров:

Элементы Column

Column элементы используются для вертикального расположения элементов. В следующем примере используется элемент Column для размещения трёх элементов Rectangle в области, определённой внешним элементом Item. Свойство spacing задано для вставки небольшого отступа между прямоугольниками.

import QtQuick 2.0

Item {
    width: 310; height: 170

    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle { color: "lightblue"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Books" } }
        Rectangle { color: "gold"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Music" } }
        Rectangle { color: "lightgreen"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Movies" } }
    }
}

Обратите внимание, что, поскольку Column наследуется непосредственно от Item, любой цвет фона необходимо добавить в родительский Rectangle, если это требуется.

Элементы Row

Row элементы используются для горизонтального расположения элементов. В следующем примере используется элемент Row для размещения трёх скругленных элементов Rectangle в области, определённой внешним цветным прямоугольником. Свойство spacing задано для вставки небольшого отступа между прямоугольниками.

Мы гарантируем, что родительский прямоугольник достаточно большой, чтобы вокруг горизонтально центрированного элемента Row оставалось свободное место.

import QtQuick 2.0

Rectangle {
    width: 320; height: 110
    color: "#c0c0c0"

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "#024c1c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "#42a51c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "white" }
    }
}

Элементы Grid

Grid элементы используются для размещения элементов в таблице. В следующем примере используется элемент Grid для размещения четырёх элементов Rectangle в сетке 2x2. Как и в других позиционерах, интервал между элементами можно указать с помощью свойства spacing.

import QtQuick 2.0

Rectangle {
    width: 112; height: 112
    color: "#303030"

    Grid {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        columns: 2
        spacing: 6

        Rectangle { color: "#aa6666"; width: 50; height: 50 }
        Rectangle { color: "#aaaa66"; width: 50; height: 50 }
        Rectangle { color: "#9999aa"; width: 50; height: 50 }
        Rectangle { color: "#6666aa"; width: 50; height: 50 }
    }
}

Разницы между горизонтальным и вертикальным интервалом между элементами нет, поэтому любое дополнительное пространство должно быть добавлено внутри самих элементов.

Все пустые ячейки в сетке должны быть созданы путём определения элементов-заполнителей в соответствующих местах в определении Grid.

Элементы Flow

Flow элементы используются для размещения элементов, как слов на странице, со строками или столбцами непересекающихся элементов.

Flow элементы располагают элементы аналогично элементам Grid, с элементами, расположенными в строках вдоль одной оси (минорной оси), а строки элементов расположены рядом вдоль другой оси (мажорной оси). Направление потока, а также интервал между элементами контролируются свойствами flow и spacing.

В следующем примере показан элемент Flow, содержащий ряд дочерних элементов Text. Они расположены аналогично тем, которые показаны на снимках экрана.

import QtQuick 2.0

Rectangle {
    color: "lightblue"
    width: 300; height: 200

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Text { text: "Text"; font.pixelSize: 40 }
        Text { text: "items"; font.pixelSize: 40 }
        Text { text: "flowing"; font.pixelSize: 40 }
        Text { text: "inside"; font.pixelSize: 40 }
        Text { text: "a"; font.pixelSize: 40 }
        Text { text: "Flow"; font.pixelSize: 40 }
        Text { text: "item"; font.pixelSize: 40 }
    }
}

Основные различия между позиционерами Grid и Flow заключаются в том, что элементы внутри Flow будут переходить на новую строку, когда закончится место на минорной оси, и элементы в одной строке могут не выравниваться с элементами в другой строке, если элементы не имеют одинаковых размеров. Как и в случае с элементами Grid, нет независимого управления интервалом между элементами и между строками элементов.

Другие способы позиционирования элементов

Существует несколько других способов позиционирования элементов в пользовательском интерфейсе. Помимо прямого указания их координат, они могут быть расположены относительно других элементов с помощью якорей или использоваться с моделями данных QML, такими как модель объектов.