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对象时,可以看到子Text和绿色的左边框,但是引入它会再次隐藏左边框和子Text。
主要问题似乎是自定义的左边框,因为使用border: Border.all(width: 0)
和borderRadius: BorderRadius.circular(10)
会使边缘根据需要舍入并显示子对象。但是现在我无法应用绿色的左边框,这在此特定设置中非常重要。
那么我在做错什么吗,或者这是扑朔迷离的错误,还是仅仅是不允许的事情?
谢谢。
编辑:下图是最终结果。颜色没关系
答案 0 :(得分:3)
有几种向Flutter小部件添加边框的方法。最基本的方法是将小部件包装在DecoratedBox
中。但是,Container
小部件还内置有DecoratedBox
。
对于以上输出,请使用Stack
而不是Row
,因为Stack
允许我们使多个小部件相互重叠,并且您可以使用{{1 }}或Align
小部件。
Positioned
答案 1 :(得分:2)
不可能同时添加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),
)
],
),
),
答案 2 :(得分:1)
这可能太晚了,但也可能对其他人有用。
您可以将获取的 Container 包裹在 ClipRRect 中,为 ClipRRect 指定半径并为 Container 指定边框!
示例:
androidx.constraintlayout.helper.widget.Flow
这应该是你上次发布的用户界面。
答案 3 :(得分:0)
我认为,受@pablo的回答启发,一种更简单的方法是只制作具有和偏移但没有任何模糊的boxShadow。
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(10),
),
boxShadow: [
// to make elevation
BoxShadow(
color: Colors.black45,
offset: Offset(2, 2),
blurRadius: 4,
),
// to make the coloured border
BoxShadow(
color: Colors.blue,
offset: Offset(0, 4),
),
],
),
上面的装饰将使我们得到一个高架的盒子,盒子的底部带有蓝色边框。 这种方法的另一个好处是您可以将它与
一起使用 borderRadius: BorderRadius.circular(num)
这意味着您可以拥有一个带有所有圆角边和彩色边框的容器。
请注意,彩色边框位于原始阴影下。这样做是为了防止标高颜色使边框变暗。
答案 4 :(得分:0)
有一个答案here
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
),
答案 5 :(得分:0)
如果您想实现 borderRadius
,您也可以使用 PhysicalModel
,但您必须提供颜色。您还可以为小部件设置阴影。
PhysicalModel(
color: Colors.red,
elevation: 5,
shadowColor: Colors.blue,
borderRadius: BorderRadius.circular(20),
child: SizedBox(width: 75, height: 75),
)