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

在Flutter中，你能够应用NestedScrollView和SliverAppBar来实现吸顶成果。以下是咱们经常在搜寻外面搜寻到的类型模版,来应用NestedScrollView以达到实现吸顶成果的步骤：

@overrideWidget 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 的版本要求比拟高哟。