<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

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

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