【flutter浆糊踩坑记】使用布局元素报错总结RenderBox was not laid out:***

 浆糊之家   2019-12-06 14:01   2,550 views 热度值

这次分享关于布局相关UI盒子报错问题,这次案例是使用ListView组件使用过程报错演示,不一定非限于ListView组件,所以相对这个问题是通用排查解决思路。

像出现类似RenderBox was not laid out:***都可以使用此方法排查

PS:注意SingleChildScrollView组件不能和ListView组件一起使用,也会报如下错误,这二个组件请不要一起混用。

报错信息如下:

那么当时关键出错布局代码如下:

虽然你可以平常练习ListView可以正常显示,但为什么这样放到Row中就报错了呢??

因为其实Row本身是没有宽度可以被继承的,而ListView导致向上找父级盒子的时候就没法定位了。

那知道需要父级盒子来支撑的话,就好办了,直接在ListView组件外层套一个普通的box盒子组件, 并且定义固定宽高度,除了定义宽高组件实现外,也是可以使用弹性组件撑开来解决,也是本文重点讲解的方法。

Tips: 这里需要说明一下,如果你嵌套多层了,你可能就要往上找层级盒子进行设定绝对定位宽高,这样就不会报错了,涉及到多个N层级嵌套不设置宽高单纯用Container包裹也是有效果的。

改造后的正确代码如下:

以上就此解决了。

加餐篇:

另外在说一下Row或Colum布局中,在此N个嵌套布局中使用其它盒子时,也报这样的错误怎么办呢?
关于弹性盒子一直像父元素宽高是一个问题是,所以有一期文章总结了,有兴趣的同学可以看一下》》使用Expanded布局时报错文章总结

Row或Colum弹性布局中,出现RenderBox was not laid out:***错误时,你必须每个相应层级套好Expanded组件(细节请看另外一篇文章),当弹性布局使用Expanded撑开后,你在使用类似ListView组件时就不会报错了。

PS:除了使用撑开组件外,最简单粗暴的方式就是外层包裹Container使用定死宽高的组件,但是缺点就是不够弹性,需要自己计算合理的宽度分配,像不同同尺寸的手机可能就会有些差异了。

报错信息抛出来总结,更多的是这条信息报错来的问题解决思路的本质,而不是简单粘贴一下答案了,好了废话到此,咱们下次浆糊在见!

 发表评论


表情