Тип Layout с помощью прикрепленных свойств позволяет установить минимальные, максимальные и предпочтительные размеры. Для установки минимальной ширины и высоты применяются соответственно свойства Layout.minimumWidth и Layout.minimumHeight. Если минимальный размер элемента не указан явно, размер устанавливается равным 0.
Для установки максимальной ширины и высоты применяются соответственно свойства Layout.maximumWidth и Layout.maximumHeight. Если максимальный размер элемента не указан явно, размер устанавливается равным Number.POSITIVE_INFINITY (неограниченный размер).
Для установки предпочтительной ширины и высоты применяются соответственно свойства Layout.preferredWidth и Layout.preferredHeight. Какие именно размеры будут установлены также зависит от свойств Layout.fillWidth и Layout.fillHeight.
Свойство Layout.fillWidth задает заполнение элементом контейнера по ширине. Если это свойство равно true
, то элемент растягивается по ширине
контейнера, при этом ширина элемента должна быть не меньше минимальной и не больше максимальный ширины. Если свойство Layout.fillWidth
равно false
, то ширина элемента устанавливается на основе его предпочтительной ширины.
Свойство Layout.fillHeight задает заполнение элементом контейнера по высоте. Если это свойство равно true
, то элемент растягивается по высоте
контейнера, при этом высота элемента должна оставаться не меньше минимальной и не больше максимальный высоты. Если свойство Layout.fillHeight
равно false
, то высота элемента устанавливается на основе его предпочтительной высоты.
Если есть несколько элементов, для которых свойства Layout.fillWidth (и/или Layout.fillHeight) равны true
, то
размеры этих элементов будут увеличиваться или уменьшаться на основе соотношения их предпочтительных размеров.
Рассмотрим различные варианты. Возьмем следующий элемент RowLayout:
import QtQuick import QtQuick.Layouts Window { width: 280 height: 150 visible: true title: "METANIT.COM" RowLayout{ anchors.fill: parent // строка заполняет пространство контейнера spacing: 10 Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#eb4d4b" // красный } Rectangle{ Layout.fillHeight: true Layout.preferredWidth: 80 color: "#16a085" // зеленый } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true color: "#0984e3" // синий } } }
Прежде всего следует отметить, что строка RowLayout здесь заполняет все пространство окна:
anchors.fill: parent
У первого элемента свойства Layout.fillWidth
/Layout.fillWidth
не установлены и равны по умолчанию false
, поэтому применяются предпочтительные размеры
Rectangle{ Layout.preferredHeight: 80 Layout.preferredWidth: 80 color: "#eb4d4b" // красный }
Второй элемент устанавливает для свойства Layout.fillHeight
значение true
, поэтому его высота будет устанавливаться исходя из доступной высоты контейнера
Rectangle{ Layout.fillHeight: true Layout.preferredWidth: 80 color: "#16a085" // зеленый }
Третий элемент устанавливает значение true
для обоих свойств - Layout.fillHeight
и Layout.fillWidth
, поэтому его высота и ширина
будут устанавливаться исходя из доступной высоты и ширины контейнера
Rectangle{ Layout.fillHeight: true Layout.fillWidth: true color: "#0984e3" // синий }
Если с высотой все относительно просто - это высота строки (с учетом возможных отступов), то ширина устанавливается с учетом доступной ширины контейнера, которая вычисляется с учетом ширины других элементов строки. То есть из ширины контейнера вычитается ширина элементов с
Чтобы ограничить автоматическое растяжение/сжатие элемента, можно установать минимальные и(или) максимальные размеры:
Rectangle{ Layout.fillHeight: true Layout.fillWidth: true Layout.minimumHeight: 50 Layout.maximumHeight: 100 Layout.minimumWidth: 50 Layout.maximumWidth: 100 color: "#0984e3" }
Следующая ситуация - у элементов установлены и предпочтительные размеры, а свойства Layout.fillHeight
и Layout.fillWidth
равны true
:
import QtQuick import QtQuick.Layouts Window { width: 280 height: 150 visible: true title: "METANIT.COM" RowLayout{ anchors.fill: parent // строка заполняет пространство контейнера spacing: 10 Rectangle{ Layout.fillHeight: true Layout.fillWidth: true Layout.preferredWidth: 100 color: "#eb4d4b" // красный } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true Layout.preferredWidth: 50 color: "#16a085" // зеленый } Rectangle{ Layout.fillHeight: true Layout.fillWidth: true Layout.preferredWidth: 100 color: "#0984e3" // синий } } }
Здесь все три элементы имеют комбинацию свойств :
Layout.fillWidth: true Layout.preferredWidth: 100 / 50
Только предпочтительная ширина первого и третьего элементов в два раза больше предпочтительный ширины второго элемента. Поэтому ширина всех трех элементов будет устанавливаться автоматически, но ширина первого и третьего элементов всегда будут в два раза больше ширины второго.