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

Позиционеры — это контейнерные элементы, которые управляют позициями элементов в декларативном пользовательском интерфейсе. Позиционеры ведут себя аналогично менеджерам компоновки, используемым со стандартными виджетами 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 в области, определённой внешним цветным Rectangle. Свойство spacing настроено для включения небольшого промежутка между прямоугольниками.

Мы гарантируем, что родительский Rectangle достаточно большой, чтобы вокруг горизонтально центрированного элемента 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, такими как модель объектов.