Qt Quick позволяет прикрепить один элемент управления к другому элементу. Для этого применяется свойство anchors, которое позволяет установить расположение относительно 7 условных линий и для установки относительно каждой линии предоставляет соответствующее свойство:
left
: устанавливает расположение относительно левого края элемента
right
: устанавливает расположение относительно правого края элемента
top
: устанавливает расположение относительно верхнего края элемента
bottom
: устанавливает расположение относительно нижнего края элемента
baseline
: устанавливает расположение относительно базовой линии элемента (по линии текста; если текста нет, то аналогично top
)
horizontalCenter
: устанавливает расположение по горизонтали относительно центра элемента
verticalCenter
: устанавливает расположение по вертикали относительно центра элемента
Еще одно свойство - centerIn позволяет позиционировать элемент в центре другого элемента. Например, поместим прямоугольник по центру окна:
import QtQuick Window { width: 280 height: 200 visible: true title: "METANIT.COM" Rectangle{ width: 150 height: 150 anchors.centerIn: parent // расположение по центру color: "green" } }
Здесь располагаем по центру зеленый квадрат размером 150х150:
Для установки по центру применяем вложенное свойство anchors.centerIn
anchors.centerIn: parent
Слово "parent" представляет специальный идентификатор, который указывает на родительский элемент-контейнер. То есть в данном случае в качестве "parent" будет использоваться объект Window.
Аналогично можно расположить элемент относительно определенной стороны элемента. Например, разместим прямоугольник внизу окна:
import QtQuick Window { width: 280 height: 200 visible: true title: "METANIT.COM" Rectangle{ width: 100 height: 100 anchors.bottom: parent.bottom // расположение внизу контейнера color: "green" } }
Здесь свойство anchors.bottom
устанавливает нижнюю границу элемента. Она получает значение parent.bottom
, что указывает, что
нижняя граница элемента прижимается к нижней границе контейнера.
Аналогичным образом можно позиционировать элемент по другим сторонам контейнера:
Rectangle{ width: 100 height: 100 anchors.right: parent.right // у правой границы контейнера color: "green" }
Можно совмещать установку по нескольким сторонам:
Rectangle{ width: 100 height: 100 anchors.bottom: parent.bottom // у нижней границы контейнера anchors.right: parent.right // у правой границы контейнера color: "green" }
В данном случае прямоугольник размещается по нижней и правой границе контейнера
Если для элемента устанавливается несколько вложенных свойств anchors, то их можно сгруппировать:
Rectangle{ anchors { bottom: parent.bottom right: parent.right } width: 100 height: 100 color: "green" }
QML позволяет также задать отступ от определенной строны контейнера. Для этого применяются следующие свойства:
leftMargin
rightMargin
topMargin
bottomMargin
Например, настроем отступы от верхней и левой сторон окна:
import QtQuick Window { width: 280 height: 200 visible: true title: "METANIT.COM" Rectangle{ width: 100 height: 100 anchors.left: parent.left // по левой границе контейнера anchors.leftMargin: 20 // отступ слева anchors.top: parent.top // по верхней границе контейнера anchors.topMargin: 10 // отступ сверха color: "green" } }
Также можно сократить определение свойств:
Rectangle{ width: 100 height: 100 anchors { left: parent.left // по левой границе контейнера leftMargin: 20 // отступ слева top: parent.top // по верхней границе контейнера topMargin: 10 // отступ сверха } color: "green" }
Позиционируя элемент по всем четырем сторонам контейнера, мы можем разместить его по центру:
import QtQuick Window { width: 280 height: 200 visible: true title: "METANIT.COM" Rectangle{ anchors { left: parent.left leftMargin: 20 top: parent.top topMargin: 20 bottom: parent.bottom bottomMargin: 20 right: parent.right rightMargin: 20 } color: "green" } }
Подобно тому, как выполняется позиционирование относительно контейнера, можно позиционировать элемент относительно других, например, соседних элементов. Возьмем следующий код:
import QtQuick Window { width: 280 height: 200 visible: true title: "METANIT.COM" Rectangle{ id: greenRect width: 100 height: 100 anchors { left: parent.left leftMargin: 20 top: parent.top topMargin: 20 } color: "#16a085" // зеленый цвет } Rectangle{ id: redRect width: 100 height: 100 anchors { left: greenRect.right // левая граница по правому краю greenRect leftMargin: 20 top: parent.top topMargin: 20 } color: "#eb4d4b" // красный цвет } }
Здесь у нас два прямоугольника, которые размещены в окне. Чтобы идентифицировать каждый элемент и ссылаться на него в коде QML, у них назначается свойство id. Например, первый (зеленый) прямоугольник имеет идентификатор "greenRect", и через этот идентификатор можно получить данный прямоугольник в других частях кода QML. Так, второй (красный) прямоугольник устанавливает свою левую границу по правой границе прямоугольника greenRect:
anchors { left: greenRect.right // левая граница по правому краю greenRect leftMargin: 20
Чтобы прямоугольники не сливались, устанавливается отступ в 20 единиц. Таким образом, мы полчим следующее окно: