1. NestedScrollView
CustomScrollView 只能組合Sliver如庭，有時我們需要組合的組件中有一個是可滾動組件（listView，GridView）珍德，那就需要通過SliverToBoxAdapter嵌入爆存，但通過SliverToBoxAdapter 嵌入的組件要求和CustomScrollView滾動方向不一致，否則不能正常工作搔弄。
為了解決這個問題贫母，F(xiàn)lutter 中提供了一個NestedScrollView 組件文兑，它的功能時組合（協(xié)調(diào)）兩個可滾動組件，下面我們看看它的定義
const NestedScrollView({
... //省略可滾動組件的通用屬性
//header腺劣，sliver構(gòu)造器
required this.headerSliverBuilder,
//可以接受任意的可滾動組件
required this.body,
this.floatHeaderSlivers = false,
})
1.1 示例
頁面有三部分組成：
1.最上面是一個 AppBar绿贞，實現(xiàn)導航，要能固定在頂端
2.AppBar 下面是一個 SliverList橘原，可以有任意多個列表項籍铁。
3.最下面是一個 ListView。
預期的效果是 SliverList 和 下面的 ListView 的滑動能夠統(tǒng)一（而不是在下面ListView 上滑動時只有ListView響應(yīng)滑動）趾断，整個頁面在垂直方向是一個整體
代碼如下：
class MSHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
title: Text("嵌套ListView"),
pinned: true, // 固定在頂部
forceElevated: innerBoxIsScrolled, // 是否顯示陰影
),
buildSliverList(5),
];
},
body: ListView.builder(
padding: const EdgeInsets.all(8),
// physics: const ClampingScrollPhysics(), //重要
itemCount: 30,
itemBuilder: (BuildContext context, int index) {
return SizedBox(
height: 50,
child: Center(child: Text('Item $index')),
);
},
),
),
);
}
Widget buildSliverList([int count = 5]) {
return SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(
(ctx, index) {
return ListTile(
leading: Text("Item $index"),
);
},
childCount: count,
),
itemExtent: 50,
);
}
}
NestedScrollView 在邏輯上將可滾動組件分為了 header 和 body 兩部分拒名，header 部分我們可以認為是外部可滾動組件（outer scroll view），可以認為這個可滾動組件就是 CustomScrollView 芋酌，所以它只能接收 Sliver增显，我們通過headerSliverBuilder 來構(gòu)建一個 Sliver 列表給外部的可滾動組件；而 body 部分可以接收任意的可滾動組件脐帝，該可滾動組件稱為內(nèi)部可滾動組件 （inner scroll view）同云。
運行效果如下
2. NestedScrollView 原理
NestedScrollView 的結(jié)構(gòu)圖如圖6-33所示：
- NestedScrollView 整體就是一個 CustomScrollView （實際上是 CustomScrollView 的一個子類）
- header 和 body 都是 CustomScrollView 的子 Sliver ，注意腮恩，雖然 body 是一個 RenderBox梢杭，但是它會被包裝為 Sliver 。
- CustomScrollView 將其所有子 Sliver 在邏輯上分為 header 和 body 兩部分：header 是前面部分秸滴、body 是后面部分。
- 當 body 是一個可滾動組件時募判， 它和 CustomScrollView 分別有一個 Scrollable 荡含，由于 body 在 CustomScrollView 的內(nèi)部咒唆，所以稱其為內(nèi)部可滾動組件，稱 CustomScrollView 為外部可滾動組件释液；同時 因為 header 部分是 Sliver全释，所以沒有獨立的 Scrollable，滑動時是受 CustomScrollView 的 Scrollable 控制误债，所以為了區(qū)分浸船，可以稱 header 為外部可滾動組件（Flutter 文檔中是這么約定的）。
- NestedScrollView 核心功能就是通過一個協(xié)調(diào)器來協(xié)調(diào)外部可滾動組件和內(nèi)部可滾動組件的滾動寝蹈，以使滑動效果連貫統(tǒng)一李命，協(xié)調(diào)器的實現(xiàn)原理就是分別給內(nèi)外可滾動組件分別設(shè)置一個 controller，然后通過這兩個controller 來協(xié)調(diào)控制它們的滾動箫老。
綜上封字，在使用 NestedScrollView 有兩點需要注意：
- 要確認內(nèi)部的可滾動組件（body）的
physics是否需要設(shè)置為ClampingScrollPhysics。比如上面的示例運行在 iOS 中時耍鬓，ListView 如果沒有設(shè)置為ClampingScrollPhysics阔籽，則用戶快速滑動到頂部時，會執(zhí)行一個彈性效果牲蜀，此時 ListView 就會與 header 顯得割裂（滑動效果不統(tǒng)一）笆制，所以需要設(shè)置。但是涣达，如果 header 中只有一個 SliverAppBar 則不應(yīng)該加项贺，因為 SliverAppBar 是固定在頂部的，ListView 滑動到頂部時上面已經(jīng)沒有要繼續(xù)往下滑動的元素了峭判，所以此時出現(xiàn)彈性效果是符合預期的开缎。 - 內(nèi)部的可滾動組件（body的）不能設(shè)置
controller和primary，這是因為 NestedScrollView 的協(xié)調(diào)器中已經(jīng)指定了它的 controller林螃，如果重新設(shè)定則協(xié)調(diào)器將會失效奕删。
3. SliverAppBar
SliverAppBar 是 AppBar 的Sliver 版，大多數(shù)參數(shù)都相同疗认，但 SliverAppBar 會有一些特有的功能完残，下面是 SliverAppBar 特有的一些配置：
const SliverAppBar({
this.collapsedHeight, // 收縮起來的高度
this.expandedHeight,// 展開時的高度
this.pinned = false, // 是否固定
this.floating = false, //是否漂浮
this.snap = false, // 當漂浮時，此參數(shù)才有效
bool forceElevated //導航欄下面是否一直顯示陰影
...
})
- SliverAppBar 在 NestedScrollView 中隨著用戶的滑動是可以收縮和展開的横漏，因此我們需要分別指定收縮和展開時的高度谨设。
- pinned 為true 時 SliverAppBar 會固定在 NestedScrollView 的頂部，行為 和 SliverPersistentHeader 的 pinned功能一致缎浇。
- floating 和 snap：floating 為 true 時扎拣，SliverAppBar 不會固定到頂部，當用戶向上滑動到頂部時，SliverAppBar 也會滑出可視窗口二蓝。當用戶反向滑動時誉券，SliverAppBar 的 snap 為 true 時，此時無論 SliverAppBar 已經(jīng)滑出屏幕多遠刊愚，都會立即回到屏幕頂部踊跟；但如果 snap 為 false，則 SliverAppBar 只有當向下滑到邊界時才會重新回到屏幕頂部鸥诽。這一點和 SliverPersistentHeader 的 floating 相似商玫，但不同的是 SliverPersistentHeader 沒有 snap 參數(shù)，當它的 floating 為 true 時牡借，效果是等同于 SliverAppBar 的floating 和 snap 同時為 true 時的效果拳昌。
4. SnapAppBar 示例
class SnapAppBar extends StatelessWidget {
const SnapAppBar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Material(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
// 實現(xiàn) snap 效果
SliverAppBar(
floating: true,
snap: true,
expandedHeight: 200,
forceElevated: innerBoxIsScrolled,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
"assets/images/fengjing3.webp",
fit: BoxFit.cover,
),
),
),
buildSliverList(5),
];
},
body: Builder(builder: (BuildContext context) {
return CustomScrollView(
slivers: <Widget>[buildSliverList(100)],
);
}),
),
);
}
Widget buildSliverList([int count = 5]) {
return SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(
(ctx, index) {
return ListTile(
leading: Text("Item $index"),
);
},
childCount: count,
),
itemExtent: 50,
);
}
}
4.1 優(yōu)化
上述代碼存在一個問題：
當我們滑動到頂部時，然后反向輕微滑動一點點蓖捶，這時 SliverAppBar 就會整體回到屏幕頂部地回，但會遮住部分ListView
使用SliverOverlapAbsorber 和 SliverOverlapInjector 進行優(yōu)化
class SnapAppBar extends StatelessWidget {
const SnapAppBar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Material(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
// 實現(xiàn) snap 效果
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
floating: true,
snap: true,
expandedHeight: 200,
forceElevated: innerBoxIsScrolled,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
"assets/images/fengjing3.webp",
fit: BoxFit.cover,
),
),
),
),
buildSliverList(5),
];
},
body: Builder(builder: (BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverOverlapInjector(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
buildSliverList(100),
],
);
}),
),
);
}
Widget buildSliverList([int count = 5]) {
return SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(
(ctx, index) {
return ListTile(
leading: Text("Item $index"),
);
},
childCount: count,
),
itemExtent: 50,
);
}
}
上面代碼運行后問題解決，和之前的代碼相比有兩個部分發(fā)生了變化：
1.SliverAppBar 用 SliverOverlapAbsorber 包裹了起來俊鱼，它的作用就是獲取 SliverAppBar 返回時遮住內(nèi)部可滾動組件的部分的長度刻像，這個長度就是 overlap（重疊） 的長度。
2.在 body 中往 CustomScrollView 的 Sliver列表的最前面插入了一個 SliverOverlapInjector并闲，它會將 SliverOverlapAbsorber 中獲取的 overlap 長度應(yīng)用到內(nèi)部可滾動組件中细睡。這樣在 SliverAppBar 返回時內(nèi)部可滾動組件也會相應(yīng)的同步滑動相應(yīng)的距離。
SliverOverlapAbsorber 和 SliverOverlapInjector 都接收有一個 handle帝火，給它傳入的是NestedScrollView.sliverOverlapAbsorberHandleFor(context)溜徙。andle 就是 SliverOverlapAbsorber 和 SliverOverlapInjector 的通信橋梁，即傳遞 overlap 長度犀填。
實際上蠢壹，當 snap 為 true 時，只需要給 SliverAppBar 包裹一個 SliverOverlapAbsorber即可九巡，而無需再給 CustomScrollView 添加 SliverOverlapInjector图贸，因為這種情況 SliverOverlapAbsorber 會自動吸收 overlap，以調(diào)整自身的布局高度為 SliverAppBar 的實際高度冕广，這樣的話 header 的高度變化后就會自動將 body 向下?lián)危╤eader 和 body 屬于同一個 CustomScrollView）疏日，同時，handle 中的 overlap 長度始終 0撒汉。而只有當 SliverAppBar 被 SliverOverlapAbsorber 包裹且為固定模式時（pinned 為 true ）沟优，CustomScrollView 中添加SliverOverlapInjector 才有意義， handle 中的 overlap 長度不為 0
綜上 建議 SliverOverlapAbsorber 和 SliverOverlapInjector 配對使用睬辐，這樣可以避免我們?nèi)蘸髮nap模式改為固定模式后忘記添加 SliverOverlapInjector 而導致bug
5. 嵌套 TabBarView
我們實現(xiàn)商城主頁挠阁，它有三個Tab宾肺，為了獲得更大的商品顯示空間，我們希望用戶向上滑動時 導航欄能夠滑出屏幕鹃唯，當用戶向下滑動時爱榕，導航欄能迅速回到屏幕瓣喊，因為向下滑動時可能是用戶想看之前的商品坡慌，也可能是用戶向找到導航欄返回
class MSTabBarPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final List<String> _tabs = ['猜你喜歡', '今日特價', '發(fā)現(xiàn)更多'];
// 構(gòu)建 tabBar
return DefaultTabController(
length: _tabs.length,
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
floating: true,
snap: true,
forceElevated: innerBoxIsScrolled,
title: Text("商城"),
bottom: TabBar(
tabs: _tabs.map((e) {
return Tab(text: e);
}).toList(),
),
),
),
];
},
body: TabBarView(
children: _tabs.map((e) {
return Builder(builder: (context) {
return CustomScrollView(
slivers: [
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
context)),
buildSliverList(20),
],
);
});
}).toList(),
),
),
),
);
}
Widget buildSliverList([int count = 5]) {
return SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(
(ctx, index) {
return ListTile(
leading: Text("Item $index"),
);
},
childCount: count,
),
itemExtent: 50,
);
}
}
