Тип 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 и других связанных типах позиционеров см. в разделе Позиционеры элементов.

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

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

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

Допустимые значения для 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.

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

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

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

Это свойство QML было добавлено в 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 (по умолчанию) — Элементы располагаются рядом друг с другом в layoutDirection, затем переходят на следующую строку.
• 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.

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

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

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

positioningComplete()

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

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

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

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

forceLayout()

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

Этот метод заставляет сетку немедленно реагировать на все ожидающие изменения в её дочерних элементах.

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

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