Horizontal viewport was given unbounded height.width.

Horizontal viewport was given unbounded height.
Vertical viewport was given unbounded width.

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

比如一个简单的例子：

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

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

所以

解决办法一：固定高度

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

这样虽然可以，但是如果高度需要自适应的话，写死就不行了

解决办法二：shrinkWrap: true

给ListView的shrinkWrap属性设置为true

shrinkWrap: true在android中有点像wrap_content的意思。

但是编译之后会发现页面底部会有超长的黄色警告。

所以还是不行

解决办法三：Flexible

Flexible是flutter中的一个弹性布局，相当于android中的LinearLayout。

Flexible中有一个flex属性，等于layout_weight，把剩余空间全部占掉。

所以，我们用Flexible把ListView包裹起来即可

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

  

 

  
1
  
2
  
3
  
4
  
5
 

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

更多详细内容：https://blog.csdn.net/yuzhiqiang_1993/article/details/89451080

文章来源: blog.csdn.net，作者：yechaoa，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/yechaoa/article/details/90641518