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

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

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

Любые пустые ячейки в сетке необходимо создавать, определяю placeholder-элементы в соответствующих местах в определении 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, такими как модель объектов.