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

Column中只有一个TextListView,但是效果确实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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yechaoa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值