GridLayout

This is an overview of the most common usage of GridLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for GridLayout.

<GridLayout> является компонентом макета, который позволяет упорядочить его дочерние элементы в табличном стиле.

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

По умолчанию , <GridLayout> содержит имеет один столбец и одну строку. Вы можете добавить столбцы и строки, настроив свойства: columns и rows. В этих свойствах вам нужно установить количество столбцов и строк, а также их ширину и высоту. Вы устанавливаете количество столбцов, перечисляя их ширину через запятую. Вы устанавливаете количество строк, перечисляя их высоту через запятую.

Вы можете установить фиксированный размер для ширины столбца и высоты строки, или вы можете создать их в адаптивной манере.

  • Абсолютное число: Указывает фиксированный размер.
  • auto: Делает столбец таким же широким, как его самый широкий дочерний элемент, или делает ряд таким же высоким, как и его самый высокий дочерний элемент.
  • *: Занимает столько места, сколько доступно после заполнения всех столбцов или строк авто и фиксированного размера.

Смотрите Props чтобы получить больше информации.

Примеры

Разметка сетки с фиксированным размером

В следующем примере создается простая сетка 2 на 2 с фиксированной шириной столбца и высотой строки.

<GridLayout columns="115, 115" rows="115, 115">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

Разметка сетки со звездообразным размером

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

<GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

Разметка сетки с фиксированным и автоматическим размером

<GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

Разметка сетки с фиксированным и автоматическим размером

В следующем примере создается сложная сетка с адаптивным дизайном, смешанными настройками ширины и высоты и несколькими объединенными ячейками.

<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
  <Label text="1,2" row="1" col="2" backgroundColor="#289062"/>
  <Label text="2,1" row="2" col="1" backgroundColor="#1c6b48"/>
  <Label text="2,2" row="2" col="2" backgroundColor="#43b883"/>
</GridLayout>

Props

ИмяТипОписание
columnsStringСтроковое значение, представляющее ширину столбца, разделенную запятыми.
Допустимые значения: абсолютное число, auto, или *.
Число указывает на абсолютную ширину столбца. auto делает столбец таким же широким, как и его самый широкий потомок. * заставляет колонку занимать все доступное горизонтальное пространство. Пространство пропорционально разделено на все столбцы звездного размера. Вы можете установить значения, такие как 3* и 5* чтобы указать соотношение размеров 3:5.
rowsStringСтроковое значение, представляющее высоту строки, разделенную запятыми.
Допустимые значения: абсолютное число, auto, или *.
Число указывает на абсолютную высоту строки. auto делает ряд таким же высоким, как и его самый высокий ребенок. * заставляет ряд занимать все доступное вертикальное пространство. Пространство пропорционально разделено на все звездные ряды. Вы можете установить значения, такие как 3* и 5* чтобы указать соотношение размеров 3:5.

Дополнительные детские props

Когда элемент является прямым потомком GridLayout, вы можете работать со следующими дополнительными свойствами.

ИмяТипОписание
rowNumberОпределяет строку для этого элемента. В сочетании со свойством col указывает координаты ячейки элемента.
Первый ряд обозначен как 0.
colNumberОпределяет столбец для элемента. В сочетании со свойством row указывает координаты ячейки элемента.
Первый столбец обозначен как 0.
rowSpanNumberОпределяет количество строк, через которые проходит этот элемент.
colSpanNumberОпределяет количество столбцов, через которые проходит этот элемент.
Contributors