Цвет фона Flutter BoxDecoration переопределяет цвет фона контейнера, почему?

У меня есть виджет Flutter Container, и я определил для него цвет (розовый), но по какой-то причине цвет в BoxDecoration переопределяет его (зеленый). Зачем?

new Container(
  color: Colors.pink,
  decoration: new BoxDecoration(
    borderRadius: new BorderRadius.circular(16.0),
    color: Colors.green,
  ),
);

6 ответов

Решение

Контейнера color является сокращением для BoxDecoration's colorТак что BoxDecoration's color в контейнере decoration собственность переопределяет свой контейнер color,

Из документов:

В color а также decorationнельзя указать оба аргумента, так как это потенциально может привести к рисованию украшения поверх цвета фона. Чтобы задать цвет для украшения, используйтеdecoration: BoxDecoration(color: color).

И если вы используете только Container чтобы обеспечить цвет, я предлагаю вам использовать ColoredBox который более оптимизирован, чем обычный Container.

ColoredBox(
  color: Colors.red, // color
  child: ...,
)

BoxDecorationиспользуется для раскрашивания фона. ВBoxDecoration виджет охватывает множество случаев, кроме рисования фона в цвете, и не так эффективен, как новый ColoredBox виджет, который рисует только цвет фона.

В color and decorationнельзя указать оба аргумента, так как это потенциально может привести к рисованию украшения поверх цвета фона. Чтобы снабдить украшение цветом, вы можете использовать приведенный ниже код.

decoration: BoxDecoration(color: Colors.red).

только установите цвет фона, используйте этот код

      new Container(
  color: Colors.pink,
  
);

если установить цвет фона с радиусом или формой, используйте цвет внутри украшения

       Container(
          decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(17)),
child:SizeBox());

Команда Flutter говорит, что свойство цвета в BoxDecoration() довольно часто используется при применении цвета фона к виджету контейнера. По этой причине они сделали отдельное сокращение для свойства цвета в виджете "Контейнер". Итак, когда мы используем и свойство цвета, и свойство цвета BoxDecoration() в одном и том же виджете Контейнер, будет выдано следующее утверждение:

Cannot provide both a color and a decoration
The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".

Вы также можете установить backgroundColor в Scaffold.

Другие вопросы по тегам