Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
border: Border(
left: BorderSide(
color: Colors.green,
width: 3,
),
),
),
height: 50,
),
这应该显示一个带有绿色边框(3px宽)的圆角容器,并且子文本“ This is a Container”。但是,它只显示了一个带有不可见子级和不可见左边框的圆角容器。
[当我取出borderRadius对象时,子文本和绿色左边框可见,但是引入它会再次隐藏左边界和子文本。
主要问题似乎是自定义的左边框,因为使用border: Border.all(width: 0)
和borderRadius: BorderRadius.circular(10)
会使边缘根据需要舍入并显示子对象。但是现在我无法应用绿色的左边框,这在此特定设置中非常重要。
所以我做错了什么,或者这是扑朔迷离的错误,还是仅仅是不允许的事情?
谢谢你。
编辑:下图是最终结果。颜色没关系
不可能同时添加border:和borderRadius :,您会收到此错误:
只能为统一的边界提供borderRadius。
您可以使用borderRadius:和boxShadow:而不是border:这样来实现所需的目标:
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3)
]
您的示例代码将是这样:
Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3),
],
),
height: 50,
),
编辑:要实现您现在提供的示例,可以执行以下操作:
Container(
padding: EdgeInsets.only(left: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.green,
),
height: 50,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)),
color: Colors.white,
),
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
),
),
另一个解决方案:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
),
height: 50,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 12.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
color: Colors.green,
),
),
Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
)
],
),
),