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

Дополнительную информацию об использовании 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

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

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

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

Это свойство было добавлено в 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 : перечисление

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

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 для получения дополнительной информации и примеров использования этих переходов.

См. также add, populate, 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 слева направо элементы будут выравниваться слева.

Допустимые значения для 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()

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

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

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

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