Horizontal viewport was given unbounded height. Vertical viewport was given unbounded width.
在写纵向或横向的布局的时候,一不小心就会遇到这个异常,宽度或高度溢出,导致widget不显示。
比如一个简单的例子:
代码语言:javascript复制 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);
}),
],
),
Column中
只有一个Text
和ListView
,但是效果确实ListView不显示,只显示Text。
随便报了一下Horizontal viewport was given unbounded height.
异常。
原因就是flutter不知道ListView的高度而导致无法渲染。
所以
解决办法一:固定高度
直接用Container包裹起来写死高度。
代码语言:javascript复制 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);
}),
)
],
),
这样虽然可以,但是如果高度需要自适应的话,写死就不行了
解决办法二:shrinkWrap: true
给ListView的shrinkWrap
属性设置为true
shrinkWrap: true在android中有点像wrap_content
的意思。
但是编译之后会发现页面底部会有超长的黄色警告。
所以还是不行
解决办法三:Flexible
Flexible
是flutter中的一个弹性布局,相当于android中的LinearLayout。
Flexible中有一个flex
属性,等于layout_weight,把剩余空间全部占掉。
所以,我们用Flexible把ListView包裹起来即可
代码语言:javascript复制 Flexible(
child: new ListView.builder(
...
}),
)
所以第三种一般才是终极的解决办法,第一种虽然也可以,但是局限性太多。
更多详细内容:https://blog.csdn.net/yuzhiqiang_1993/article/details/89451080