Тип 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 не visible или имеет ширину или высоту 0, он не будет выведен на экран и не будет виден в столбце. Также, поскольку Grid автоматически размещает свои дочерние элементы, дочерний элемент в Grid не должен задавать свои позиции x или y или закреплять себя с помощью свойств anchor.

Дополнительную информацию об использовании Grid и других связанных типах позиционеров см. в разделе Позиционеры элементов.

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

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

add : Переход

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

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

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

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

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

bottomPadding : real

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

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

columnSpacing : qreal

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

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

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

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

См. также rowSpacing.

columns : int

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

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

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

Устанавливает горизонтальное и вертикальное выравнивание элементов в 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.

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

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

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

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

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

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

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

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

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

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

Устанавливает горизонтальное и вертикальное выравнивание элементов в 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.

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

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

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

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

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

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

leftPadding : вещественное

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

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

move : Transition

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

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

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

Примечание: В Qt Quick 1 этот переход применялся ко всем элементам, которые были частью позиционера во время его создания. Начиная с QtQuick 2 и далее, позиционеры применяют переход populate к этим элементам вместо этого.

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

padding : вещественное

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

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

populate : Transition

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

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

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

rightPadding : вещественное

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

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

rowSpacing : qreal

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

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

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

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

См. также columnSpacing.

rows : int

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

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

spacing : qreal

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

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

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

topPadding : вещественное

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

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

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

Устанавливает горизонтальное и вертикальное выравнивание элементов в сетке. По умолчанию элементы вертикально выравниваются по верху. Горизонтальное выравнивание следует направлению layoutDirection сетки, например, при 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.

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

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

positioningComplete()

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

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

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

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

forceLayout()

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

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

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

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