Flutter Horizontal viewport was

问题由来

写纵向或横向的布局的时候，一不小心就会遇到这个异常，宽度或高度溢出，导致widget不显示

比如一个简单的例子:

body: Column(
    children: <Widget>[
        Text('abc'),
      child: new ListView.builder(
          itemCount: articleDatas.length,
          itemBuilder: (BuildContext context, int position) {
            if (position.isOdd) return new Divider();
            return getRow(position);
          }),
    ],
  ),

Column中只有一个Text和ListView，但是效果确实ListView不显示，只显示Text。
随便报了一下Horizontal viewport was given unbounded height.异常。
原因就是flutter不知道ListView的高度而导致无法渲染

解决办法

方法1.固定高度

直接用Container包裹起来写死高度

body: Column(
        children: <Widget>[
        
          Text("abc"),
          
          Container(
                height: 200,
              child: new ListView.builder(
                  itemCount: articleDatas.length,
                  itemBuilder: (BuildContext context, int position) {
                    if (position.isOdd) return new Divider();
                    return getRow(position);
                  }),
              )
        ],
      ),

方法2.shrinkWrap: true

给ListView的shrinkWrap属性设置为true,及父视图的大小跟随子组件的内容大小

方法3.Flexible

Flexible是flutter中的一个弹性布局，相当于android中的LinearLayout。
Flexible中有一个flex属性，等于layout_weight，把剩余空间全部占掉。
所以，我们用Flexible把ListView包裹起来即可

Flexible(
    child: new ListView.builder(
        ...
        }),
  )

第三种一般才是最终的解决办法，第一种虽然也可以，但是局限性太多.