使用了ListView.builder 布局空白,log提示RenderBox was not laid out: RenderViewport#680c1 NEEDS-LAYOUT NEEDS-PAINT的问题.
在进行Flutter布局绘制时,不可避免的使用ListView.builder().
但是这个很大概率在使用上会嵌套在Row或者Column组件内.
就会出现预期的页面一片空白,Log日志会提示:
I/flutter ( 3616): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 3616): The following assertion was thrown during performResize():
I/flutter ( 3616): Vertical viewport was given unbounded height.
.
.
.
This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 3616): RenderSliverPadding#0d3d4 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 3616): RenderSliverList#6716e NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 3616): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 3616): Another exception was thrown: RenderBox was not laid out: RenderViewport#680c1 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 3616): Another exception was thrown: RenderBox was not laid out: RenderViewport#680c1 NEEDS-PAINT
I/flutter ( 3616): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#4730f relayoutBoundary=up24 NEEDS-PAINT
I/flutter ( 3616): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#61c50 relayoutBoundary=up23 NEEDS-PAINT
I/flutter ( 3616): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#0febd relayoutBoundary=up22 NEEDS-PAINT
I/flutter ( 3616): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#81c5b relayoutBoundary=up21 NEEDS-PAINT
I/flutter ( 3616): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#d8e60 relayoutBoundary=up20 NEEDS-PAINT
I/flutter ( 3616): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#4cd4e relayoutBoundary=up19 NEEDS-PAINT
I/flutter ( 3616): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#39958 relayoutBoundary=up18 NEEDS-PAINT
具体原因就是:
在Flutter 的Column或者Row内使用ListView.builder()需要对改ListView的大小进行指定.
具体的解决办法就是 在该ListView.builder()外嵌套一个SizeBox或者Container即可…
比如:
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 3,
itemBuilder: (context, index) => showRecommendItem(index));
}
就不行,直接整个页面白屏,然后log提示RenderBox 相关的信息,
但是在外面嵌套一个SizeBox,指定一下高度,就可以了.
@override
Widget build(BuildContext context) {
return SizedBox(
height: ScreenUtil().setHeight(900.0),
child: ListView.builder(
itemCount: 3,
itemBuilder: (context, index) => showRecommendItem(index)),
);
}