Тип 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 или анкер с помощью свойств anchors.

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

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

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

add : Переход

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

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

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

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

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

bottomPadding : real

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

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

columnSpacing : qreal

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

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

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

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

См. также rowSpacing.

columns : int

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

move : Переход

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

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

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

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

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

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

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

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

populate : Переход

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

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

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

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

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

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

rowSpacing : qreal

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

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

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

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

См. также columnSpacing.

rows : целое

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

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

spacing : qreal

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

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

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

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

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

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

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

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

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

positioningComplete()

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

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

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

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

forceLayout()

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

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

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

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