Тип 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 слева направо, элементы будут выровнены по левому краю.

Допустимые значения для 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, ViewTransition и Примеры Qt Quick — Позиционеры.

[since 5.0] columnSpacing : qreal

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

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

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

Это свойство было введено в 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 — Позиционеры.

[since 5.0] rowSpacing : qreal

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

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

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

Это свойство было введено в 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.