Ask the assistant

0/400

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

DecoratedBox

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

Оформляет дочерний элемент с помощью 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