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

0/400

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

AspectRatio

Заставляет ребёнка держать заданное соотношение сторон «ширина к высоте». Элемент берёт максимум доступной ширины (или высоты, если ширина не ограничена) и подбирает вторую сторону по соотношению.

Тип: single-child

AspectRatio aspectRatio:1.78
  ColoredBox color:#4f46e5

Параметры

Параметр	Тип	Default	Описание
`aspectRatio`	double	1.0	Ширина ÷ высота: `1.78` ≈ 16:9, `1.0` — квадрат, `0.75` — портрет 3:4

Примеры

Обложка 16:9 под колонкой

Column spacing:8
  AspectRatio aspectRatio:1.78
    Image src:"https://example.com/cover.jpg" fit:cover
  Text "Название"

Квадратная плитка

SizedBox width:120
  AspectRatio aspectRatio:1.0
    ColoredBox color:#059669

Скруглённая карточка с постером

AspectRatio aspectRatio:0.67
  ClipRRect
    #borderRadius circular 12
    Image src:"https://example.com/poster.jpg" fit:cover

Различия между приложением и сайтом

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

Best practices

Давайте AspectRatio ограниченную ширину (колонка, SizedBox width , ячейка сетки): тогда высота выводится сама, без жёстких чисел.
Для сетки одинаковых плиток подойдёт и childAspectRatio у GridView .