我需要制作一个具有圆形边框、颜色和轮廓的容器,但背景颜色溢出了轮廓颜色。
我该如何解决这个问题?
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 21,
constraints: BoxConstraints(
minWidth: 21,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
borderRadius: BorderRadius.circular(21),
color: Colors.pink,
),
child: Align(
child: Text(
"1",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12),
)));
}
}
结果:(在左侧最明显)
它...看起来像一个错误?我想你可以将问题报告给 flutter github。
如果您只是想要一个解决方案,您可以尝试将背景颜色(粉红色)移动到小部件的较低级别。
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 21,
constraints: BoxConstraints(
minWidth: 21,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
borderRadius: BorderRadius.circular(21),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(21),
color: Colors.pink,
),
child: Align(
child: Text(
"1",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12,
),
),
),
),
);
}
}
Github 上有一个关于此问题的 open issues。
这里我附上了我在@artyomdevyatov 的回复中发现的解决方法。
return Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.grey, // border color
shape: BoxShape.circle,
),
child: Padding(
padding: EdgeInsets.all(2), // border width
child: Container( // or ClipRRect if you need to clip the content
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange, // inner circle color
),
child: Container(), // inner content
),
),
);