问题描述:
在flutter NestedScrollView中,body部分的内容会跑到headerSliverBuilder底下去。
我们一般使用NestedScrollView的时候,类似于:
NestedScrollView(
//配置可折叠的头布局
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return buildSliverAppBar()];
},
//页面的主体内容
body: buildChildWidget(),
);
这样使用会出现body被header遮挡的问题,需要使用下面的方式:
解决方案:
第一部分,头部使用SliverOverlapAbsorber包裹:
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [SliverOverlapAbsorber(
sliver: buildSliverAppBar(),
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)
)];
}
第二部分,body = 使用Builder+CustomScrollView+SliverOverInjector:
SafeArea(
top: false,
bottom: false,
child: Builder(builder: (BuildContext context){
return CustomScrollView(
physics: BouncingScrollPhysics(),
slivers: [
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)
),
SliverToBoxAdapter(
child: Column(
children: [
....
],
),
)
],
);
}
)
)
如此下来之后,就可以解决上述被遮挡问题,这也是官方给的解决方案!