Для управления размещением элементов Qt Quick предоставляет специальный набор элементов, которые позволяют размещать визуальные элементы определенным образом (Qt Quick Layouts):
RowLayout: упорядочивает элементы в строку
ColumnLayout: упорядочивает элементы в столбец
GridLayout: позволяет динамически располагать элементы в виде сетки
Layout: предоставляет свойства для элементов, помещенных в тип макета ColumnLayout, RowLayout или GridLayout
StackLayout: элементы упорядочиваются в виде стека, в котором одновременно виден только один элемент
Для подключения элементов Qt Quick Layouts в файл QML применяется следующее выражение импорта:
import QtQuick.Layouts
Подобные элементы также могут изменять размер своих дочерних элементов, автоматически устанавливать их положение. Основное различие между подобными элементами компоновки и позиционерами (Column, Row) заключается в том, что элементы управления компоновкой могут изменять размер своих дочерних элементов при изменении размера окна. Для этого класс Layout представляет ряд прикрепляемых свойств (attached property) - их можно прикрепить к каждому элементу и таким образом настроить размеры и позиционирование элемента. Рассмотрим вкратце эти свойства:
alignment: представляет тип Qt.Alignment
и определяет выравнивание
bottomMargin: представляет тип real
и определяет отступ снизу
column: представляет тип int
и определяет количество столбцов (применяется только в GridLayout)
columnSpan: представляет тип int
и устанавливает, на сколько столбцов растягивается ячейка GridLayout
fillHeight: представляет тип bool
. Если равно true
, то элемент растягивается по высоте контейнера с учетом минимальной и максимальный высоты элемента.
Если равно false
, то высота элемента устанавливается на основе его предпочтительной высоты
fillWidth: представляет тип bool
. Если равно true
, то элемент растягивается по ширине контейнера с учетом минимальной и максимальный ширины элемента.
Если равно false
, то ширина элемента устанавливается на основе его предпочтительной ширины
horizontalStretchFactor: представляет тип int
и устанавливает множитель растяжения по горизонтали
leftMargin: представляет тип real
и устанавливает отступ слева
margins: представляет тип real
и определяет внешний отступ
maximumHeight: представляет тип real
и определяет максимальную высоту
maximumWidth: представляет тип real
и определяет максимальную ширину
minimumHeight: представляет тип real
и определяет минимальную высоту
minimumWidth: представляет тип real
и определяет минимальную высоту
preferredHeight: представляет тип real
и определяет предпочтительную высоту
preferredWidth: представляет тип real
и определяет предпочтительную ширину
rightMargin: представляет тип real
и устанавливает отступ справа
row: представляет тип int
и определяет количество строк (для GridLayout)
rowSpan: представляет тип int
и устанавливает, на сколько строк будет растягиваться ячейка GridLayout
topMargin: представляет тип real
и определяет отступ сверху
verticalStretchFactor: представляет тип int
и устанавливает множитель растяжения по вертикали
Для расположения в строку применяется тип RowLayout. Он предоставляет дополнительные свойства для управления компоновкой элементов:
layoutDirection
: устанавливает направление элементов и может принимать два значения:
Qt.LeftToRight
: элементы располагаются слева направо (значение по умолчанию)
Qt.RightToLeft
: элементы располагаются справа налево
spacing
: пространство между соседними элементами (по умолчанию равно 5)
uniformCellSizes
: если равно true
, то для вложенных элементов устанавливается одинаковый размер. Доступно с версии Qt 6.6
Пример применения RowLayout:
import QtQuick import QtQuick.Layouts Window { width: 280 height: 150 visible: true title: "METANIT.COM" RowLayout{ spacing: 10 // пространство между элементами Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#eb4d4b" // красный } Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#16a085" // зеленый } Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#0984e3" // синий } } }
Для расположения в столбик применяется тип ColumnLayout. Он предоставляет те же свойства для управления компоновкой элементов:
layoutDirection
: устанавливает направление элементов и может принимать два значения:
Qt.LeftToRight
: элементы располагаются слева направо (значение по умолчанию)
Qt.RightToLeft
: элементы располагаются справа налево
spacing
: пространство между соседними элементами (по умолчанию равно 5)
uniformCellSizes
: если равно true
, то для вложенных элементов устанавливается одинаковый размер. Доступно с версии Qt 6.6
Пример применения ColumnLayout:
import QtQuick import QtQuick.Layouts Window { width: 250 height: 280 visible: true title: "METANIT.COM" ColumnLayout{ spacing: 10 Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#eb4d4b" // красный } Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#16a085" // зеленый } Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#0984e3" // синий } } }
Для установки внешних отступов элемента до границ элемента компоновки можно использовать свойство margins
для установки всех отступов разом, либо установить каждый отступ по отдельности с
помощью bottomMargin
/leftMargin
/rightMargin
/topMargin
. Установка отступов на примере RowLayout:
import QtQuick import QtQuick.Layouts Window { width: 300 height: 150 visible: true title: "METANIT.COM" RowLayout{ spacing: 10 // пространство между элементами Rectangle{ Layout.topMargin: 20 // отступ от верхней стороны контейнера Layout.leftMargin: 15 // отступ от левой стороны контейнера Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#eb4d4b" // красный } Rectangle{ Layout.topMargin: 20 // отступ от верхней стороны контейнера Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#16a085" // зеленый } Rectangle{ Layout.topMargin: 20 // отступ от верхней стороны контейнера Layout.rightMargin: 15 // отступ от правой стороны контейнера Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#0984e3" // синий } } }
Для установки выравнивания элемента внутри элемента компоновки применяется свойство Layout.alignment, которое представляет тип Qt.Alignment
и которое может принимать следующие значения:
Qt.AlignLeft: выравнивание слева
Qt.AlignHCenter
: выравнивание по горизонтали по центру
Qt.AlignRight
: выравнивание справа
Qt.AlignTop
: выравнивание сверху
Qt.AlignVCenter
: выравнивание по вертикали по центру
Qt.AlignBottom
: выравнивание снизу
Qt.AlignBaseline
: выравнивание по базовой линии
Значение по умолчанию — 0, что означает комбинацию Qt.AlignVCenter | Qt.AlignLeft
. Если указано только выравнивание по горизонтали, то для выравнивания по вертикали применяется Qt.AlignVCenter
. Если указано только выравнивание по вертикали, то
для выранивания по горизонтальни применяется Qt.AlignLeft
.
Пример выравнивания:
import QtQuick import QtQuick.Layouts Window { width: 300 height: 150 visible: true title: "METANIT.COM" RowLayout{ anchors.fill: parent Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#eb4d4b" // красный Layout.alignment: Qt.AlignTop } Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#16a085" // зеленый Layout.alignment: Qt.AlignBottom | Qt.AlignHCenter } Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#0984e3" // синий Layout.alignment: Qt.AlignRight | Qt.AlignTop } } }
В данном случае первый элемент выравнивается по верхнему краю контейнера (и по умолчанию по левому краю). Второй элемент выравнивает по нижнему краю по вертикали и по центру по горизонтали. Третий элемент выравнивается по правому краю по горизонтали и по верхнему краю по вертикали.