天天看點

Flutter NestedScrollView中body被頭部遮擋問題問題描述:解決方案:

問題描述:

在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: [
         				....
                      ],
                    ),
                  )
                ],
              );
              }
            )
        )
           

如此下來之後,就可以解決上述被遮擋問題,這也是官方給的解決方案!