Container是flutter开发中最常用的组件,它有以下特点:
1. 当Container没有child组件的时候,Container的宽高默认占满父控件,也就是全屏
2.当Container有child组件的时候,宽高以child组件的宽高同等大小,也就是wrap_content
当Container的child组件为Row或者Column的时候,要为主轴添加 MainAxisSize.min,否则Container在主轴上是铺满的。
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Container自适应'),
),
body: Center(
child: Container(
color: Colors.white,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset('images/test_teacher1.png', width: 22, height: 22),
Text('小天使:', style: TextStyle(color: Colors.grey, fontSize: 14)),
Text('陪你去看流星雨', style: TextStyle(color: Colors.black, fontSize: 14))
],
),
),
),
);
}
如果把这个Container放到ListView中,这个MainAxisSize.min是不起作用的,依然是占满屏幕宽度,请看代码
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Container自适应'),
),
body: ListView.separated(
itemBuilder: (context, index) {
return Container(
constraints: BoxConstraints(
minHeight: 50
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(15)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset('images/test_teacher1.png', width: 22, height: 22),
Text('小天使:', style: TextStyle(color: Colors.grey, fontSize: 14)),
Text('陪你去看流星雨', style: TextStyle(color: Colors.black, fontSize: 14))
],
),
);
},
separatorBuilder: (context, index){
return Divider(height: 10,);
},
itemCount: 5),
);
}
运行之后的效果是这样子的:
怎么样让它自适应wrap_content,而不是占满屏幕宽度呢?
答案是在Container外层再套一个Row组件,然后再设置一个 mainAxisSize: MainAxisSize.min
代码如下:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Container自适应'),
),
body: ListView.separated(
itemBuilder: (context, index) {
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
constraints: BoxConstraints(
minHeight: 50
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(15)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset('images/test_teacher1.png', width: 22, height: 22),
Text('小天使:', style: TextStyle(color: Colors.grey, fontSize: 14)),
Text('陪你去看流星雨', style: TextStyle(color: Colors.black, fontSize: 14))
],
),
)
],
);
},
separatorBuilder: (context, index){
return Divider(height: 10,);
},
itemCount: 5),
);
}
改完之后,效果如下图所示: