Спросите помощника

0/400

Вопрос обрабатывается ИИ-сервисом и сохраняется для улучшения ответов. Не вводите персональные данные.

Column

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

Тип: 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 предотвратит переполнение.