上篇文章雕什，我們通過ExtendedNestedScrollView + SliverAppbar 實現(xiàn)了折疊滑動的效果卦方，可以查看稍算，以下鏈接：
（一）Flutter 實現(xiàn) Android CollapsingToolbarLayout折疊布局效果
但是江解，不知道小伙伴有沒有發(fā)現(xiàn)一個問題块仆，有個兩個列表滾動同步的問題贤牛，我上網查了一下惋鹅，ExtendedNestedScrollView 這個組件專門解決了這個問題，還解決了一個明顯的問題殉簸，就是Pinned頭引起的bug解決闰集，咱們可以先上代碼
@override
Widget build(BuildContext context) {
final FlexibleSpaceBarSettings? settings =
context.dependOnInheritedWidgetOfExactType(aspect:FlexibleSpaceBarSettings);
return Scaffold(
body: ExtendedNestedScrollView(
onlyOneScrollInBody: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
// sliverappbar 有三部分， 第一部分 標題般卑，通過title屬性配置;
// 第二部分就是用來折疊部分的輪播圖武鲁，通過 flexibleSpace 屬性
// 配置的FlexibleSpaceBar中配置;
//第三部分就是通過 bottom 配置的 TabBar 標簽欄，在這里結合 PreferredSize 來使用;
SliverAppBar(
//SliverAppbar 的標題 title
title: buildHeader(),
//標題居中
centerTitle: true,
//true時 SliverAppBar 會固定在頁面頂部蝠检；false時沐鼠，SliverAppBar 會隨著滑動向上滑動
pinned: true,
//當值為true時 SliverAppBar設置的title會隨著上滑動隱藏
//然后配置的bottom會顯示在原AppBar的位置
//當值為false時 SliverAppBar設置的title會不會隱藏
//然后配置的bottom會顯示在原AppBar設置的title下面
// floating: false,
//
// //當snap配置為true時，向下滑動頁面叹谁，SliverAppBar（以及其中配置的flexibleSpace內容）會立即顯示出來饲梭，
// //反之當snap配置為false時，向下滑動時焰檩，只有當ListView的數(shù)據滑動到頂部時憔涉，SliverAppBar才會下拉顯示出來。
// snap: false,
// automaticallyImplyLeading: true,
//展開的高度
expandedHeight: 200,
elevation: 0,
//appbr 下的內容區(qū)域
flexibleSpace: FlexibleSpaceBar(
//背景
//配置的是一個widget也就是說在這里可以使用任意的
//Widget組合 在這里直接使用的是一個圖片
background: buildFlexibleSpaceWidget(),
),
// bottom: buildFlexibleTooBarWidget(), //appbar 底部區(qū)域
),
SliverPersistentHeader(
pinned: true,
delegate: StickyTabBarDelegate(
child: TabBar(
labelColor: Colors.black,
controller: this.tabController,
tabs: tabs,
),
),
),
];
},
pinnedHeaderSliverHeightBuilder: () {
return MediaQuery.of(context).padding.top + kToolbarHeight;
},
body: TabBarView(
controller: this.tabController,
children: tabViews,
),
));
}
1析苫、pinned 問題 導致的bug 兜叨，解決方式：
pinnedHeaderSliverHeightBuilder: () {
return MediaQuery.of(context).padding.top + kToolbarHeight;
}
返回狀態(tài)欄高度 和 SliverAppbar 高度總和。
2衩侥、列表滾動同步問題
onlyOneScrollInBody：true
