Тип QML Grid

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

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

Свойства

• add : Переход
• bottomPadding : вещественное число
• columnSpacing : qreal
• columns : целое число
• effectiveHorizontalItemAlignment : перечисление
• effectiveLayoutDirection : перечисление
• flow : перечисление
• horizontalItemAlignment : перечисление
• layoutDirection : перечисление
• leftPadding : вещественное число
• move : Переход
• padding : вещественное число
• populate : Переход
• rightPadding : вещественное число
• rowSpacing : qreal
• rows : целое число
• spacing : qreal
• topPadding : вещественное число
• verticalItemAlignment : перечисление

Подробное описание

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

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

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

add : Переход

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

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

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

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

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

bottomPadding : вещественное число

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

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

columnSpacing : qreal

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

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

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

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

См. также rowSpacing.

columns : целое число

Это свойство содержит количество столбцов в сетке. По умолчанию количество столбцов равно 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 Examples - Справа налево.

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

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

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

move : Transition

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

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

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

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

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

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

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

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

populate : Transition

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

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

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

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

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

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

rowSpacing : qreal

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

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

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

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

См. также columnSpacing.

rows : int

Это свойство хранит количество строк в сетке.

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

spacing : qreal

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

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

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

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

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

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