内嵌视图滚动行为一致

https://youtu.be/_h7CkzXY3aM

https://www.bilibili.com/video/BV1Gh4y1571p/

前言

上一节讲了 CustomScrollView ，可以发现有的地方滚动并不是很连贯。

这时候就需要 NestedScrollView 来处理了。

今天会写一个如下图的例子来实现滚动一致。

原文 https://ducafecat.com/blog/flutter-sliver-nested-scroll-view

参考

https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html

https://api.flutter.dev/flutter/widgets/SliverOverlapAbsorber-class.html

https://api.flutter.dev/flutter/widgets/SliverOverlapInjector-class.html

知识点 NestedScrollView

NestedScrollView 是 Flutter 中的一个 Widget，它可以嵌套多个滚动视图，例如 ListView、GridView、SliverAppBar 等。NestedScrollView 可以让多个滚动视图联动滚动，从而实现一些复杂的交互效果。

常见的业务场景：

• 一个页面上有多个可滚动的区域，而且这些区域之间的滚动是相互独立的，但是它们的滚动行为需要协调一致，比如一个列表和一个悬浮的顶部栏。
• 实现类似于网易云音乐个人主页的效果，即在滚动过程中，一个悬浮的头部会被逐渐放大，同时顶部的导航栏会渐变消失，直到最后整个头部完全占据整个屏幕。
• 在列表中嵌套一个可滚动的子列表，例如在一个电商应用中，展示一个大分类下的多个小分类，每个小分类下面又有多个商品。

NestedScrollView 和 CustomScrollView 都是支持自定义滚动视图的 Widget。它们的区别在于，CustomScrollView 可以通过添加多个 Sliver 来实现复杂的滚动视图效果，而 NestedScrollView 则是将多个滚动视图嵌套在一起，并提供了一些方便的接口来协调它们之间的滚动。因此，NestedScrollView 的使用场景更加适合于多个可滚动区域之间需要协调滚动的情况。

headerSliverBuilder 头部实现函数

SliverOverlapAbsorber 与 SliverOverlapInjector，作用是防止 CustomScrollView 中的滚动视图与其他视图重叠。

编写 MyCustomAppBar 悬停 Bar

lib/app_bar.dart