Фреймворк Qt и QML позволяют определять привязку свойств одних элементов к другим. Например:
import QtQuick Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ anchors.fill: parent Rectangle { width: parent.width height: parent.height color: "#0984e3" } } }
Здесь ширина и высота прямоугольника привязаны к свойстам width
и height
контейнера Column, который, в свою очередь, занимает все окно
Так, для установки привязки к ширине Column применяется выражение
width: parent.width
Здесь parent является зарезервированным словом и указывает на родительский контейнер, в котором находится текущий элемент. Однако мы могли бы этому контейнеру явным образом назначить
идентификатор через свойство id
и через идентификатор ссылаться на контейнер:
import QtQuick Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ id: column anchors.fill: parent Rectangle { width: column.width height: column.height color: "#0984e3" } } }
Здесь мы ссылаемся на контейнер Column через его идентификатор "column". Однако привязка к его свойствам width и height также будет работать.
При привязки мы можем использовать динамические выражения. Например, добавим отступы в пример выше:
import QtQuick Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ id: column anchors.fill: parent leftPadding: 10 topPadding: 10 Rectangle { width: column.width - 20 height: column.height - 20 color: "#0984e3" } } }
Здесь с помощью свойств leftPadding
и topPadding
элемент Column определяет отступы слева и сверху. А в элементе Rectangle мы устанавливаем привязку с помощью динамически вычисляемых значений. Например, установка ширины прямоугольника:
width: column.width - 20
По сути здесь опять же идет привязка к свойству column.width. Но поскольку мы устанавили отступ слева в 10 единиц, то чтобы получить такой же отступ справа, вычитаем из ширины контейнера число 20 (10 слева + 10 справа). В итоге мы можем сжимать и растягивать окно, но ширина прямоугольника по прежнему будет равна выражению column.width - 20
При возникновении некоторых событий в приложении генерируются сигналы. Для разных элементов есть разный набор сигналов, которые мы можем обработать с помощью специальных обработчиков событий. Например, мы вводим в поле ввода некоторое значение, и нам надо его дополнительно вывести на другой элемент, например, элемент Text. Для этого можно обработать соответствующие сигналы:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ anchors.fill: parent padding: 5 SpinBox{ id: ageBox width: parent.width - 10 from: 0 to: 100 value: 18 onValueModified: {output.text = value} } Text{ id: output font.pixelSize: 15 } } }
Здесь при изменении значения в SpinBox срабатывает сигнал valueModified
, который обрабатываем в onValueModified, где свойству output.text
присваиваем новое значение. Однако тут мы уже сталкиваемся с проблемой, что начальное значение из SpinBox не отображается в элементе Text. И если нам не нужна какая-то сложная логика при обработке сигнала, то в подобном случае проще установить привязку:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ anchors.fill: parent padding: 5 SpinBox{ id: ageBox width: parent.width - 10 from: 1 to: 100 value: 18 } Text{ id: output font.pixelSize: 15 text: ageBox.value } } }
Таким образом, если при обработке сигналов не нужна сложная логика, то можно использовать привязку. И опять же это могут быть динамически вычисляемые значения:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ anchors.fill: parent padding: 5 SpinBox{ id: ageBox width: parent.width - 10 from: 1 to: 100 value: 18 } Text{ id: output font.pixelSize: 15 text: "Ваш возраст: " + ageBox.value } } }
Другой пример - привяжем текст к цвету прямоугольника:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ anchors.fill: parent padding: 5 spacing: 5 TextField{ id: colorBox width: parent.width - 10 } Rectangle { color: colorBox.text width: 50 height: 50 } } }
Аналогично можно устанавливать привязку одного свойства к нескольким свойствам в том числе разных элементов. Например:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ anchors.fill: parent padding: 5 Text{ text: "Имя" } TextField{ id: nameBox width: parent.width - 10 } Text{ text: "Возраст" } SpinBox{ id: ageBox width: parent.width - 10 from: 1 to: 100 value: 18 } Text{ id: output font.pixelSize: 15 text: "<b>Имя</b>: " + nameBox.text + "<br><b>Возраст</b>: " + ageBox.value } } }
В данном случае свойство text
последнего элемента Text привязано сразу к двум свойствам - text и value элементов TextField и SpinBox: