Устройства позиционирования элементов

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

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

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

Позиционеры

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

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

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