无法在 Flutter 中为容器设置背景色
Not able to set background color to Container in Flutter
我正在使用下面的代码将容器的背景颜色设置为 black,但它没有显示。
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'),
),
),
)
输出:
有人可以帮我吗?
使用 padding
属性 代替 margin
。
我认为问题在于 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'),
),
),
),
您可以更改值以获得您想要的结果
简单的解决方案:将其包裹在容器中并赋予颜色 属性。
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'),
),
),
),
)
我正在使用下面的代码将容器的背景颜色设置为 black,但它没有显示。
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'),
),
),
)
输出:
有人可以帮我吗?
使用 padding
属性 代替 margin
。
我认为问题在于 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'),
),
),
),
您可以更改值以获得您想要的结果
简单的解决方案:将其包裹在容器中并赋予颜色 属性。
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'),
),
),
),
)