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

0/400

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

DecoratedBox

Оформляет дочерний элемент с помощью BoxDecoration — цвет, градиент, бордер, скругление, тень, фоновое изображение.

Тип: single-child

DecoratedBox
  #decoration color:#36345E
    #borderRadius circular 20
  Center
    Text "Контент"

Параметры

Параметр	Тип	Default	Описание
`position`	string	background	Позиция декорации: `background` , `foreground`

Вложенные структуры

`#decoration`

#decoration color:#36345E
  #borderRadius circular 16
  #border fromBorderSide
    #side color:#FF0000 width:2
  #gradient linear begin:centerLeft end:centerRight
    #colors #FF0000 #0000FF
  #boxShadow
    :# color:0x40000000 blurRadius:10
      #offset x:0 y:4
  #image "data/images/bg.jpg" fit:cover

Параметр	Тип	Описание
`color`	color	Цвет фона
`shape`	string	Форма: `rectangle` , `circle`
`backgroundBlendMode`	string	Режим смешивания

Вложенные в #decoration :

#borderRadius — скругление углов: circular 16 , only topLeft:16 topRight:16
#border — бордер: fromBorderSide → #side , all → color: width: , directional → #top #bottom #start #end
#gradient — градиент: linear begin:... end:... → #colors , #stops
#boxShadow — тени: :# позиционные элементы с color , blurRadius , spreadRadius и вложенным #offset x: y: (или offset:zero )
#image — фоновое изображение. Путь и все свойства фона живут на самом #image , одним уровнем: src / url , #headers , scale , fit , alignment , opacity , repeat , colorFilter , centerSlice .

  #image "data/images/bg.jpg" fit:cover alignment:topCenter

  #image "https://example.com/bg.jpg" fit:cover scale:2
    #headers Authorization:"Bearer …"

Вложенного #image внутри #image НЕТ — это ошибка разметки, о которой скажет анализатор. Такая запись когда-то повторяла устройство Flutter ( DecorationImage снаружи, провайдер внутри), но ничего не давала: даже scale не был отдельным, потому что фон рисуется с масштабом scale фона × scale провайдера .

Примеры

Карточка со скруглением и бордером

DecoratedBox
  #decoration color:#36345E
    #borderRadius circular 20
    #border fromBorderSide
      #side color:#585593 width:2
  Padding
    #padding all 24
    Column spacing:8
      Text "Заголовок"
      Text "Описание"

Градиентный фон

DecoratedBox
  #decoration
    #gradient linear begin:topCenter end:bottomCenter
      #colors #6C63FF #36345E
  Padding
    #padding all 40
    Center
      Text "Градиент"
        #style fontSize:24 color:#FFFFFF

Радиальный градиент: круг и эллипс

#gradient radial рисует круг : radius — доля КОРОТКОЙ стороны коробки (так его читает RadialGradient ), поэтому в широкой коробке получается пятно посередине, а не свечение во всю ширину.

Эллипс задаётся осями — каждая доля от своей стороны, как проценты у radial-gradient(ellipse X% Y%) :

DecoratedBox
  #decoration
    #gradient radial radiusX:0.5 radiusY:0.18
      #colors 0x806938EF 0x006938EF

Параметр	Что значит
`radius`	Радиус круга — доля короткой стороны (по умолчанию `0.5` ).
`radiusX`	Горизонтальный радиус — доля ширины . Делает градиент эллипсом.
`radiusY`	Вертикальный радиус — доля высоты .

Названа одна ось — вторая берёт radius . Не названа ни одна — всё как было, круг. Словарь 66; установка, не знающая слов, нарисует круг — у́же задуманного, но на своём месте.

Бордер фокуса (в selectorBuilder скролла)

@Macros id:selectorBuilder isFocused:false
  DecoratedBox
    #decoration
      #borderRadius circular 20
      #border fromBorderSide
        #side color:{isFocused ? $focusColor : 0x00} width:3