Ask the assistant

0/400

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

Positioned

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

Ставит ребёнка в Stack по абсолютным координатам: отступы от краёв и/или явный размер. Используется для бейджей, кнопок «закрыть», подписей поверх изображения.

Тип: single-child

Stack
  SizedBox width:200 height:120
    ColoredBox color:#36345E
  Positioned top:8 right:8
    Text "NEW"

Работает только непосредственно внутри Stack .

Параметры

Параметр	Тип	Описание
`top`	длина	Отступ от верхнего края `Stack`
`bottom`	длина	Отступ от нижнего края
`left`	длина	Отступ от левого края
`right`	длина	Отступ от правого края
`width`	длина	Ширина
`height`	длина	Высота

Все параметры необязательны, неуказанные стороны остаются свободными. Длина — число (пиксели) или строка с единицей: "50%" , "10svh" (процент считается по своей оси, как в CSS: left / right от ширины, top / bottom от высоты).

Задав одновременно left и right (или top и bottom ), вы растягиваете ребёнка на всё расстояние между ними — ширину (высоту) тогда писать не нужно.

Примеры

Подпись поверх картинки

Stack
  SizedBox width:320 height:180
    Image src:"https://example.com/poster.jpg" fit:cover
  Positioned left:12 right:12 bottom:12
    Text "Название фильма"

Затемнение на всю ширину

Stack
  SizedBox width:320 height:180
    ColoredBox color:#585593
  Positioned bottom:0 left:0 right:0 height:60
    ColoredBox color:#99000000

Кнопка закрытия в углу

@opened:true
Stack
  SizedBox width:240 height:140
    ColoredBox color:#1e1b4b
  Positioned top:4 right:4
    InkWell onTap:{opened = false}
      Padding
        #padding all 8
        Icon close

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

На сайте Positioned всегда становится абсолютно позиционированным блоком; если ребёнок занимает всю область, он заполняет её (как во Flutter, где у ребёнка с размером жёсткие ограничения). Прочих отличий нет.

Bad practices

Positioned вне Stack

// BAD — Positioned не в Stack не имеет смысла: во Flutter это ошибка
Column
  Positioned top:8 left:8
    Text "Бейдж"

// GOOD — родитель Stack
Stack
  SizedBox width:100 height:100
    ColoredBox color:#36345E
  Positioned top:8 left:8
    Text "Бейдж"

Best practices

Задайте размер Stack обычным (не Positioned ) ребёнком — SizedBox или картинкой. Размер Stack определяют именно непозиционированные дети; без такого Positioned не от чего отсчитываться.
Для простого выравнивания одного элемента (по центру, в угол) хватает alignment у Stack или Align — Positioned нужен, когда нужны точные отступы.