Тип 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 — Позиционеры.

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

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

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

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

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

Данная документация была добавлена в Qt 5.6.

add : Переход

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

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

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

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

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

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 Examples - Positioners.

populate : Transition

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

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

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

rowSpacing : qreal

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

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

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

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

См. также columnSpacing.

rows : int

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

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

spacing : qreal

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

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

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

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

positioningComplete()

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

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

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

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

forceLayout()

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

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

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

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