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

如此下来之后,就可以解决上述被遮挡问题,这也是官方给的解决方案!

你可能感兴趣的:(Flutter,flutter,SliverAppBar遮挡)