无法在 Flutter 中为容器设置背景颜色答案

【问题标题】：Not able to set background color to Container in Flutter无法在 Flutter 中为容器设置背景颜色
【发布时间】：2020-08-01 02:33:01
【问题描述】：

我正在使用下面的代码将容器的背景颜色设置为黑色，但它没有显示。

       Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.black,
              margin: EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 10),
              height: 40,
              width: double.infinity,
              child: RaisedButton(
                textColor: Colors.white,
                color: Colors.blue[300],
                onPressed: () => null,
                child: Text('Next'),
              ),
             ),
          )

输出：

有人可以帮帮我吗？

【问题讨论】：

标签： flutter flutter-layout flutter-widget

【解决方案1】：

简单的解决方案：将其包裹在容器中并赋予其颜色属性。

Container(
            color: Colors.black,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                margin: EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 10),
                height: 40,
                width: double.infinity,
                child: RaisedButton(
                  textColor: Colors.white,
                  color: Colors.blue[300],
                  onPressed: () => null,
                  child: Text('Next'),
                ),
              ),
            ),
          )

【讨论】：

【解决方案2】：

我认为问题在于 RaisedButton 获得了 Container 的大小，这就是为什么您看不到任何黑色的原因。正如NetanZaf 建议的那样，您可以使用填充，这样 RaisedButton 就不会获得容器大小，您会看到黑色。

这是以下代码的结果：

Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          color: Colors.black,
          margin: EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 10),
          padding : EdgeInsets.only(left: 10, right: 10, bottom: 10, top: 10),
          height: 40,
          width: double.infinity,
          child: RaisedButton(
            textColor: Colors.white,
            color:Colors.blue[300],
            onPressed: () => null,
            child: Text('Next'),
          ),
         ),
      ),

您可以更改值以获得所需的结果

【讨论】：

【解决方案3】：

使用padding 属性而不是margin。

【讨论】：