关于前端: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 的版本要求比拟高哟。