上篇文章，我们通过ExtendedNestedScrollView + SliverAppbar 实现了折叠滑动的效果，可以查看，以下链接：
（一）Flutter 实现 Android CollapsingToolbarLayout折叠布局效果
但是，不知道小伙伴有没有发现一个问题，有个两个列表滚动同步的问题，我上网查了一下，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的数据滑动到顶部时，SliverAppBar才会下拉显示出来。
// snap: false,
// automaticallyImplyLeading: true,
//展开的高度
expandedHeight: 200,
elevation: 0,
//appbr 下的内容区域
flexibleSpace: FlexibleSpaceBar(
//背景
//配置的是一个widget也就是说在这里可以使用任意的
//Widget组合 在这里直接使用的是一个图片
background: buildFlexibleSpaceWidget(),
),
// bottom: buildFlexibleTooBarWidget(), //appbar 底部区域
),
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;
}
返回状态栏高度 和 SliverAppbar 高度总和。
2、列表滚动同步问题
onlyOneScrollInBody：true
