Flutter系列之Container宽度自适应

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),
    );
  }

改完之后，效果如下图所示：