关于前端: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_Dq2h8aHpF8mda67a…

应用以上俩种形式咱们能很好的解决 NestedScrollView 滚动吸顶。然而第二次形式对于 flutter 的版本要求比拟高哟。