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

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