当布局上有两个同色container时
class MyPage extends StatefulWidget {
MyPage({
Key? key}) : super(key: key);
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: TextButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return _renderDialog();
});
},
child: Text('test')),
)));
}
_renderDialog() {
return Container(
alignment: Alignment.center,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.white,
),
),
Container(
width: 300,
height: 99,
decoration: BoxDecoration(
color: Colors.white,
),
),
],
),
),
);
}
}
可以看到两个container之间有一条奇怪的分隔线。
原因是flutter的绘制引擎无法正确对其物理像素,出现了间隙 ,漏出了背景色,而且不知道为什么官方一直都没有修复这个严重的bug。
参考issue
解决方法:为两个container设置宽度为0,颜色为背景色的边框
return Container(
alignment: Alignment.center,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.white,
//边框
border: Border.all(width: 0, color: Colors.white)
),
),
Container(
width: 300,
height: 99,
decoration: BoxDecoration(
color: Colors.white,
//边框
border: Border.all(width: 0, color: Colors.white)
),
),
],
),
),
);