flutter:RenderBox was not laid out: RenderViewport#7cf2e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
一,报错信息:
======== Exception caught by rendering library =====================================================
The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.
If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column or Wrap instead. Otherwise, consider using a CustomScrollView to concatenate arbitrary slivers into a single scrollable.
The relevant error-causing widget was:
CustomScrollView CustomScrollView:file:///Users/liuhongdi/StudioProjects/demo2/lib/pages/StickyPage.dart:21:16
When the exception was thrown, this was the stack:
#0 debugCheckHasBoundedAxis.<anonymous closure> (package:flutter/src/rendering/debug.dart:358:13)
#1 debugCheckHasBoundedAxis (package:flutter/src/rendering/debug.dart:417:4)
#2 RenderViewport.computeDryLayout (package:flutter/src/rendering/viewport.dart:1424:12)
#3 RenderBox.performResize (package:flutter/src/rendering/box.dart:2861:12)
#4 RenderObject.layout (package:flutter/src/rendering/object.dart:2694:9)
#5 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#6 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#7 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#8 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#9 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#10 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#11 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#12 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#13 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#14 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#15 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#16 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#17 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#18 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#19 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#20 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1483:11)
#21 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#22 ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:62:11)
#23 RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:1161:28)
#24 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:1255:32)
#25 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#26 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:180:12)
#27 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:1118:7)
#28 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:249:7)
#29 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:419:14)
#30 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#31 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#32 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#33 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#34 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1483:11)
#35 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#36 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#37 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#38 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#39 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#40 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#41 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#42 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#43 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#44 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#45 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#46 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#47 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#48 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#49 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#50 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#51 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#52 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#53 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#54 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#55 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3750:13)
#56 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#57 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#58 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#59 _RenderTheaterMixin.layoutChild (package:flutter/src/widgets/overlay.dart:1076:13)
#60 _RenderTheater.performLayout (package:flutter/src/widgets/overlay.dart:1422:9)
#61 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#62 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#63 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#64 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#65 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#66 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#67 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#68 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#69 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#70 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#71 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#72 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#73 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#74 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#75 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#76 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#77 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#78 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:18)
#79 RenderObject.layout (package:flutter/src/rendering/object.dart:2715:7)
#80 RenderView.performLayout (package:flutter/src/rendering/view.dart:294:12)
#81 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:2548:7)
#82 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1112:18)
#83 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1125:15)
#84 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:616:23)
#85 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:1231:13)
#86 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:482:5)
#87 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1442:15)
#88 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1355:9)
#89 SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:1064:9)
#90 PlatformDispatcher.scheduleWarmUpFrame.<anonymous closure> (dart:ui/platform_dispatcher.dart:873:16)
#94 _RawReceivePort._handleMessage (dart:isolate-patch/isolate_patch.dart:194:12)
(elided 3 frames from class _Timer and dart:async-patch)
The following RenderObject was being processed when the exception was fired: RenderViewport#7cf2e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
... size: MISSING
... axisDirection: down
... crossAxisDirection: right
... offset: ScrollPositionWithSingleContext#b3f86(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#8eb73, ScrollDirection.idle)
... anchor: 0.0
RenderObject: RenderViewport#7cf2e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
size: MISSING
axisDirection: down
crossAxisDirection: right
offset: ScrollPositionWithSingleContext#b3f86(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#8eb73, ScrollDirection.idle)
anchor: 0.0
... center child: RenderSliverToBoxAdapter#08bff NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
... parentData: paintOffset=Offset(0.0, 0.0)
... constraints: MISSING
... geometry: null
... child: RenderConstrainedBox#e4d07 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
... parentData: paintOffset=Offset(0.0, 0.0)
... constraints: MISSING
... size: MISSING
... additionalConstraints: BoxConstraints(w=Infinity, h=200.0)
... child: RenderSemanticsAnnotations#208cd NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
... parentData: <none>
... constraints: MISSING
... size: MISSING
... child: RenderImage#de955 NEEDS-LAYOUT NEEDS-PAINT
... parentData: <none>
... constraints: MISSING
... size: MISSING
... image: null
... height: Infinity
... fit: fill
... alignment: Alignment.center
... invertColors: false
... filterQuality: medium
... child 1: _RenderSliverFloatingPinnedPersistentHeaderForWidgets#b4aef NEEDS-LAYOUT NEEDS-PAINT
... parentData: paintOffset=Offset(0.0, 0.0)
... constraints: MISSING
... geometry: null
... maxExtent: 50.0
... child position: EXCEPTION (_TypeError)
... effective scroll offset: null
... child 2: RenderSliverList#16b4a NEEDS-LAYOUT NEEDS-PAINT
... parentData: paintOffset=Offset(0.0, 0.0)
... constraints: MISSING
... geometry: null
... no children current live
====================================================================================================
======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderBox was not laid out: RenderViewport#7cf2e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 2251 pos 12: 'hasSize'
二,解决:
原代码:
class StickyPage extends StatelessWidget {
var appBarHeight = AppBar().preferredSize.height;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("标题")),
body:
Column(
children: [
Container(
height: 60,
decoration:BoxDecoration(
color:Colors.orange,//设置背景色为黑色
),
),
CustomScrollView(
slivers: <Widget>[
_buildBanner(),
_buildStickyBar(),
_buildList(),
],
),
],
)
);
}
column中添加了CustomScrollView,所以要指定高度
修改后:
import 'dart:math';
import 'package:flutter/material.dart';
class StickyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
//顶部appbar的高度
var appBarHeight = AppBar().preferredSize.height;
//顶部状态栏的高度
var top = MediaQueryData.fromView(View.of(context)).padding.top;
return Scaffold(
appBar: AppBar(title: Text("标题")),
body:
Column(
children: [
Container(
height: 60, //container的高度
decoration:BoxDecoration(
color:Colors.orange,//设置背景色为黑色
),
),
Container(
height: MediaQuery.of(context).size.height-appBarHeight-top-60,
child: CustomScrollView(
slivers: <Widget>[
_buildBanner(),
_buildStickyBar(),
_buildList(),
],
),
)
],
)
);
}
给CustomScrollView外层加了Container并指定了高度
测试效果:

浙公网安备 33010602011771号