問題描述:
在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: [
....
],
),
)
],
);
}
)
)
如此下來之後,就可以解決上述被遮擋問題,這也是官方給的解決方案!