除了常规的设置 宽高外。Container默认是适配子控件大小的,但当设置对齐方式时Container将会填满父控件,是否填满剩余空间取决于子控件是否需要填满父控件。
请看下面区别
- 情形1
class BodyDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50,
width: 100,
),
Flexible(
child: Container(
color: Colors.red,
height: 50,
child: Text('Container',style: TextStyle(color: Colors.white),),
)
),
Container(
color: Colors.blue,
height: 50,
width: 100,
),
],
);
}
}
效果图:
01.jpg- 情形2
class BodyDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50,
width: 100,
),
Flexible(
child: Container(
color: Colors.red,
height: 50,
alignment: Alignment.center,
child: Text('Container',style: TextStyle(color: Colors.white),),
)
),
Container(
color: Colors.blue,
height: 50,
width: 100,
),
],
);
}
}
效果图:
02.jpg二者唯一的差别之处就是: 是否设置了container的对齐方式alignment
网友评论