Тип QML Grid

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

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

Свойства

• add : Переход
• bottomPadding : real
• columnSpacing : qreal
• columns : int
• effectiveHorizontalItemAlignment : перечисление
• effectiveLayoutDirection : перечисление
• flow : перечисление
• horizontalItemAlignment : перечисление
• layoutDirection : перечисление
• leftPadding : real
• move : Переход
• padding : real
• populate : Переход
• rightPadding : real
• rowSpacing : qreal
• rows : int
• spacing : qreal
• topPadding : real
• 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 слева направо элементы будут выровнены слева.

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

[since 5.0] columnSpacing : qreal

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

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

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

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

См. также rowSpacing.

columns : int

Это свойство хранит количество столбцов в сетке. По умолчанию количество столбцов равно 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 Examples - Positioners.

populate : Transition

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

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

См. также add, ViewTransition и Qt Quick Examples - Positioners.

[since 5.0] rowSpacing : qreal

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

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

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

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

См. также columnSpacing.

rows : int

Это свойство задаёт количество строк в сетке.

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

spacing : qreal

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

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

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

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

[since 5.9] positioningComplete()

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

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

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

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

[since 5.9] forceLayout()

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

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

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

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