Fultter - NestedScrollView 如何实现吸顶效果以及遇到的问题

1、如何利用NestedScrollView 进行吸顶效果？

在Flutter中，你可以使用NestedScrollView和SliverAppBar来实现吸顶效果。以下是我们常常在搜索里面搜索到的类型模版,来使用NestedScrollView以到达实现吸顶效果的步骤：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      // 配置可折叠的头布局
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        // 在这里创建你的SliverAppBar
        return [
          SliverAppBar(
            // 设置吸顶效果的属性
            // 设置为true以启用吸顶效果
            pinned: true,
            // 其他属性设置
          ),
        ];
      },
      //页面的主体内容
      body: SingleChildScrollView(
        ...
      ),
    ),
  );
}

2、我们采用这样的方式去写的时候会发生什么问题？以及如何一步步去解决问题

在我们使用会出现body被header遮挡的问题。 导致滑动到顶部我们的body 在有一部分展示不全。如下图：

发生以上的原因是因为NestedScrollView滑动的时候他无法预支header的高度问题，所以我们使用“SliverOverlapAbsorber+ SliverOverlapInjector”来解决问题，这两个小部件是在处理header和body之间的重叠问题时被使用到。

Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverAppBar(
              pinned: true,
              // 其他属性设置
            ),
          ),
        ];
      },
      body: Builder(
        builder: (BuildContext context) {
          return CustomScrollView(
            slivers: [
              SliverOverlapInjector(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              ),
              ...
            ],
          );
        },
      ),
    ),
  );
}

3、注意事项

使用这个我们会发现如何只有一个header的时候，一般问题就会被解决。但是我们有多个header怎么办呢？在测试的过程中发现虽然返回的是一个数组，但是数组里面我们只能使用一个 ”SliverOverlapAbsorber“ 去监听，如果写入多个SliverOverlapAbsorber会造成严重的卡顿，最终大概率会发生死机的情况，如何去解决这个问题，我们可以使用一下俩种方式：

3.1 使用 sliver_tools

这个插件，允许将多个sliver分组在一起以便它们可以作为单个小部件返回。

@override
  Widget build(BuildContext context) {
    return MultiSliver(
      pushPinnedChildren: false, // defaults to false
      children: <Widget>[
        SliverPersistentHeader(...),
        SliverList(...),
      ],
    );
  }

3.2 使用SliverMainAxisGroup

此小部件实现了在单个 ScrollView 中逐个放置条的功能，所有sliver都在组本身的边界内绘制（即 SliverPercientHeaders 不会在所有sliver提供的滚动范围之外绘制）
具体的文档说明大家可以点击查看 https://docs.google.com/document/d/1e2bdLSYV_Dq2h8aHpF8mda67aOmZocPiMyjCcTTZhTg/edit?resourcekey=0-Xj2X2XA3CAFae22Sv3hAiA

使用以上俩种方式我们能很好的解决NestedScrollView 滚动吸顶。但是第二次方式对于flutter 的版本要求比较高哟。