Расположители элементов

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

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

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

Расположители

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

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

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

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

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

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

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, такими как Модель объекта.