Horizontal viewport was given unbounded height.width.
【摘要】
Horizontal viewport was given unbounded height. Vertical viewport was given unbounded 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);
}),
],
),
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);
}),
)
],
),
这样虽然可以,但是如果高度需要自适应的话,写死就不行了
解决办法二: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(
...
}),
)
所以第三种一般才是终极的解决办法,第一种虽然也可以,但是局限性太多。
更多详细内容:https://blog.csdn.net/yuzhiqiang_1993/article/details/89451080
文章来源: blog.csdn.net,作者:yechaoa,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/yechaoa/article/details/90641518
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)