如何在 Flutter 中的行小部件内的容器上添加边框?
Posted
技术标签:
【中文标题】如何在 Flutter 中的行小部件内的容器上添加边框?【英文标题】:How to add border on a container inside a row widget in Flutter? 【发布时间】:2020-07-04 21:38:54 【问题描述】: Container(
// decoration: BoxDecoration(
// border: Border.all(color: Colors.black45),
// borderRadius: BorderRadius.circular(8.0),
// ),
child: Row(
children: <Widget>[
Container(
child: Text("hi"),
margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width *0.42,
height: 90,
color: Colors.black12,
),
Container(
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42 ,
height: 90,
color: Colors.black12,
)
],
),
),
我可以在外部容器上使用 Box 装饰添加边框,但是当我尝试在内部容器上执行相同操作时它会引发错误。是什么问题以及如何解决?
【问题讨论】:
请提及您遇到的错误 【参考方案1】:为了在行小部件内的容器上添加边框,我们必须对内部容器使用装饰。 一旦您发布错误,我们可以更好地回答您,但我认为以下代码将对您有所帮助。 如果你使用装饰,那么你不能直接在容器中添加颜色属性,它应该只在装饰中。
Container(
child: Row(
children: <Widget>[
Container(
child: Text("hi"),
margin: EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
shape: BoxShape.rectangle,
border: Border.all(
color: Colors.blue,
width: 4,
)),
),
Container(
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
shape: BoxShape.rectangle,
border: Border.all(
color: Colors.blue,
width: 4,
)),
)
],
),
),
【讨论】:
必填答案:我们不能直接在容器中添加颜色属性,它应该只是装饰。 正确的颜色是装饰物品的属性,不是tge容器的属性。 容器的颜色参数用于设置盒子装饰中的颜色值,如果它为空,容器的颜色参数只是装饰颜色的简写【参考方案2】:在容器小部件中,您不能同时使用color
和decoration
。从Container
中删除color
属性并将其移动到BoxDecoration
小部件中
这应该可行:
Container(
child: Row(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black45),
borderRadius: BorderRadius.circular(8.0),
color: Colors.black12, //add it here
),
child: Text("hi"),
margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width *0.42,
height: 90,
//color: Colors.black12, //must be removed
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black45),
borderRadius: BorderRadius.circular(8.0),
color: Colors.black12, //add it here
),
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42 ,
height: 90,
//color: Colors.black12, // must be removed
)
],
),
),
【讨论】:
以上是关于如何在 Flutter 中的行小部件内的容器上添加边框?的主要内容,如果未能解决你的问题,请参考以下文章
Flutter - 如何在图像下方使用带有图像和文本/图标的容器小部件