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

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

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

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

Позиционеры

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

Элементы столбца

Элементы столбца используются для вертикального упорядочения элементов. В следующем примере элемент Column используется для упорядочения трех элементов Прямоугольник в области, определенной внешним элементом Элемент. Свойство 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 используется для упорядочения трех закругленных элементов Прямоугольник в области, определенной внешним цветным прямоугольником. Свойство 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 используется для размещения четырех элементов Прямоугольник в сетке 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 }
    }
}

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

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

Элементы потока

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

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

Следующий пример демонстрирует элемент Flow, содержащий несколько элементов Текст. Они расположены аналогичным образом, как показано на скриншотах.

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 }
    }
}

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

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

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