Ask the assistant

0/400

Your question is processed by an AI service and kept to improve answers. Do not enter personal data.

Column

This page has not been translated into English yet. The Russian original is below.

Вертикальный контейнер — размещает дочерние элементы сверху вниз.

Тип: multi-child

Column spacing:16
  Text "Первый"
  Text "Второй"

Параметры

Параметр	Тип	Default	Описание
`alignment`	string	start	Выравнивание по главной оси: `start` , `end` , `center` , `spaceBetween` , `spaceAround` , `spaceEvenly`
`size`	string	max	Размер по главной оси: `min` , `max`
`crossAlignment`	string	center	Выравнивание по поперечной оси: `start` , `end` , `center` , `stretch` , `baseline`
`textDirection`	string	—	Направление текста: `ltr` , `rtl`
`textBaseline`	string	—	Базовая линия текста: `alphabetic` , `ideographic`
`spacing`	double	0	Расстояние между дочерними элементами

Примеры

Центрированный список

Column mainAxisAlignment:center crossAxisAlignment:center spacing:16
  Text "Заголовок"
  Text "Подзаголовок"
  Button onPressed:"navigate:/home"
    Text "Начать"

Растянутые элементы

Column crossAxisAlignment:stretch spacing:8
  Text "Поле 1"
  Text "Поле 2"
  ElevatedButton onPressed:"form:submit"
    Text "Отправить"

Best practices

`size:min` внутри скроллов

Column по умолчанию имеет mainAxisSize:max ( MainAxisSize.max ) — он пытается занять всё доступное пространство по главной оси. Внутри вертикального ReeelScroll каждый item получает maxHeight , равный viewport'у. Column с mainAxisSize:max растянется на весь viewport, вытеснив остальные секции.

Всегда используй size:min для Column внутри вертикального скролла:

// BAD — Column растянется на весь viewport скролла
ReeelScroll
  #config direction:vertical
  Column crossAxisAlignment:stretch
    $NavBar
    $HeroBanner

// GOOD — Column займёт только высоту своих детей
ReeelScroll
  #config direction:vertical
  Column crossAxisAlignment:stretch mainAxisSize:min
    $NavBar
    $HeroBanner

Аналогично, Column с size:max внутри горизонтального скролла (по cross-axis) безопасен, но если Column вложен в другой вертикальный flex-контейнер без ограничений — size:min предотвратит переполнение.