Тип QML Grid

Размещает своих дочерние элементы в виде сетки. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• add : Переход
• bottomPadding : вещественное число
• columnSpacing : qreal
• columns : целое число
• effectiveHorizontalItemAlignment : перечисление
• effectiveLayoutDirection : перечисление
• flow : перечисление
• horizontalItemAlignment : перечисление
• layoutDirection : перечисление
• leftPadding : вещественное число
• move : Переход
• padding : вещественное число
• populate : Переход
• rightPadding : вещественное число
• rowSpacing : qreal
• rows : целое число
• spacing : qreal
• topPadding : вещественное число
• verticalItemAlignment : перечисление

Сигналы

• positioningComplete()

Методы

• forceLayout()

Подробное описание

Grid — это тип, который размещает дочерние элементы в виде сетки.

Grid создаёт сетку ячеек, достаточно большую для размещения всех дочерних элементов, и размещает эти элементы слева направо и сверху вниз в ячейках. Каждый элемент размещается в верхнем левом углу своей ячейки с координатами (0, 0).

Grid по умолчанию имеет четыре столбца и создаёт столько строк, сколько необходимо для размещения всех дочерних элементов. Количество строк и столбцов можно ограничить, задав свойства rows и columns.

Например, ниже приведён Grid, содержащий пять прямоугольников разных размеров:

import QtQuick 2.0

Grid {
    columns: 3
    spacing: 2
    Rectangle { color: "red"; width: 50; height: 50 }
    Rectangle { color: "green"; width: 20; height: 50 }
    Rectangle { color: "blue"; width: 50; height: 20 }
    Rectangle { color: "cyan"; width: 50; height: 50 }
    Rectangle { color: "magenta"; width: 10; height: 10 }
}

Grid автоматически размещает дочерние элементы в виде сетки:

Если элемент внутри Grid не видим или имеет ширину или высоту 0, он не будет размещён и не будет виден в столбце. Также, поскольку Grid автоматически размещает свои дочерние элементы, дочерний элемент внутри Grid не должен устанавливать свои координаты x или y или привязывать себя к любым из свойств anchor.

Для получения дополнительной информации об использовании Grid и других связанных типах размещения см. Размещение элементов в Qt Quick.

См. также Flow, Row, Column, Positioner, GridLayout и Примеры Qt Quick - Размещение элементов.

Документация по свойствам

Устанавливает горизонтальное и вертикальное выравнивание элементов в Grid. По умолчанию элементы вертикально выравниваются по верху. Горизонтальное выравнивание следует направлению выравнивания Grid, например, при направлении выравнивания слева направо, элементы будут выровнены по левому краю.

Допустимые значения для horizontalItemAlignment - Grid.AlignLeft, Grid.AlignRight и Grid.AlignHCenter.

Допустимые значения для verticalItemAlignment - Grid.AlignTop, Grid.AlignBottom и Grid.AlignVCenter.

Ниже приведены три примера выравнивания элементов.

Горизонтальное выравнивание	AlignLeft	AlignHCenter	AlignHCenter
Вертикальное выравнивание	AlignTop	AlignTop	AlignVCenter

При зеркальном отображении макета с помощью присоединенного свойства LayoutMirroring::enabled или путем установки layoutDirection, горизонтальное выравнивание элементов также будет зеркально отображаться. Однако свойство horizontalItemAlignment останется неизменным. Для запроса эффективного горизонтального выравнивания элементов используйте только для чтения свойство effectiveHorizontalItemAlignment.

Эта документация была добавлена в Qt 5.1.

См. также Grid::layoutDirection и LayoutMirroring.

Эти свойства содержат отступы вокруг содержимого.

Эта документация была добавлена в Qt 5.6.

add : Переход

Это свойство содержит переход, который будет выполнен для элементов, добавленных в этот позиционер. Для позиционера это относится к:

• Элементам, которые создаются или переродируются как дочерние элементы позиционера после создания позиционера
• Дочерним элементам, которые изменяют своё свойство Item::visible с false на true и, таким образом, теперь видны

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

Примечание: Этот переход не применяется к элементам, которые уже являются частью позиционера во время его создания. В этом случае применяется переход populate.

См. также populate, ViewTransition и Примеры Qt Quick - Размещение элементов.

columnSpacing : qreal

Это свойство содержит отступ в пикселях между столбцами.

Если это свойство не установлено, то используется отступ для отступа между столбцами.

По умолчанию это свойство не установлено.

Это свойство было добавлено в Qt 5.0.

См. также rowSpacing.

columns : целое число

Это свойство содержит количество столбцов в сетке. По умолчанию количество столбцов равно 4.

Если в сетке недостаточно элементов для заполнения указанного количества столбцов, некоторые столбцы будут иметь нулевую ширину.

effectiveLayoutDirection : перечисление

Это свойство содержит эффективное направление макета сетки.

При использовании присоединенного свойства LayoutMirroring::enabled для локальных макетов, направление визуального макета позиционера сетки будет зеркальным. Однако свойство layoutDirection останется неизменным.

См. также Grid::layoutDirection и LayoutMirroring.

flow : перечисление

Это свойство содержит направление макета.

Возможные значения:

• Grid.LeftToRight (по умолчанию) - Элементы размещаются рядом друг с другом в направлении выравнивания, затем переносятся на следующую строку.
• Grid.TopToBottom - Элементы размещаются рядом друг с другом сверху вниз, затем переносятся на следующий столбец.

layoutDirection : перечисление

Это свойство содержит направление макета.

Возможные значения:

• Qt.LeftToRight (по умолчанию) - Элементы размещаются сверху вниз и слева направо. Направление потока зависит от свойства Grid::flow.
• Qt.RightToLeft - Элементы размещаются сверху вниз и справа налево. Направление потока зависит от свойства Grid::flow.

См. также Flow::layoutDirection, Row::layoutDirection и Примеры Qt Quick - Справа налево.

move : Переход

Это свойство содержит переход, который будет выполнен для элементов, перемещенных внутри позиционера. Для позиционера это относится к:

• Элементы-потомки, которые перемещаются при перемещении, добавлении, удалении или перестановке других элементов в позиционере
• Элементы-потомки, которые перемещаются при изменении размера других элементов в позиционере

Переход может использовать свойство ViewTransition, чтобы получить более подробную информацию об элементе, который перемещается. Однако обратите внимание, что для этого перехода перемещения списки ViewTransition.targetIndexes и ViewTransition.targetItems устанавливаются только при вызове этого перехода из-за добавления других элементов в позиционере; в других случаях эти списки будут пустыми. См. документацию ViewTransition для получения более подробной информации и примеров использования этих переходов.

См. также add, populate, ViewTransition и Примеры Qt Quick - Позиционеры.

populate : Transition

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

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

См. также add, ViewTransition и Примеры Qt Quick - Позиционеры.

rowSpacing : qreal

Это свойство содержит отступ в пикселях между строками.

Если это свойство не задано, используется отступ для интервала между строками.

По умолчанию это свойство не задано.

Это свойство было добавлено в Qt 5.0.

См. также columnSpacing.

rows : int

Это свойство содержит количество строк в сетке.

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

spacing : qreal

Отступ — это количество пикселей, оставленных пустыми между смежными элементами. Величина применяемого отступа будет одинаковой в горизонтальном и вертикальном направлениях. Значение по умолчанию — 0.

В приведенном ниже примере на сером фоне размещена сетка, содержащая красную, синюю и зеленую прямоугольники. Область, занимаемая позиционером сетки, окрашена в белый цвет. Позиционер слева имеет отступ 0 (значение по умолчанию), а позиционер справа имеет отступ 6.

См. также rows и columns.

Документация по сигналам

positioningComplete()

Этот сигнал излучается при завершении позиционирования.

Соответствующий обработчик — onPositioningComplete.

Этот сигнал был добавлен в Qt 5.9.

Документация по методам

forceLayout()

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

Этот метод заставляет сетку немедленно реагировать на любые незавершенные изменения в своих потомках.

Примечание: методы, как правило, должны вызываться только после завершения компонента.

Этот метод был добавлен в Qt 5.9.