Тип QML Grid

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

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

Свойства

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

См. также 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 Примеры - Позиционеры.

populate : Transition

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

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

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

[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.