题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。
Flutter是谷歌推出的最新的移动开发框架。 Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景，如向上滑动视图时，要折叠隐藏一部分内容，这时候就需要使用到 NestedScrollView 与 SliverAppBar 的结合使用。
在本节中是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现的折叠头部效果
【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过
【x2】各种系列的视频教程 免费开源 关注 你不会迷路
【x3】系列文章 百万 Demo 随时 复制粘贴 使用
【x4】本文章对应的讲解视频在这里
【x5】本文章的全部代码在这里
本 Demo 实现的最终效果如下：
首先页面的主体 使用的是 Scaffold 脚手架来构建，因为使用到了 TabBar 与 TabBarView ，标签的左右切换是一个动画效果，所以这里也使用到了SingleTickerProviderStateMixin ， 代码如下：
class NetScrollHomePage extends StatefulWidget { @override State<StatefulWidget> createState() { return ScrollHomePageState(); } } class ScrollHomePageState extends State with SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { return Scaffold( appBar: new AppBar(title: Text(" 配制"),), /// 处理滑动 body: buildNestedScrollView(), ); }buildNestedScrollView 方法就是构建了一个滑动布局 NestedScrollView ，其中两部分，头部使用的是 SliverAppBar 来触发折叠效果， body 用来配置页面主体部分，代码如下：
///构建滑动布局 ///如下图1-1所示 NestedScrollView buildNestedScrollView() { return NestedScrollView( headerSliverBuilder: (BuildContext context, bool b) { return [ SliverAppBar( ///true SliverAppBar 不会滑动 pinned: true, ///是否随着滑动隐藏标题 floating: true, ///SliverAppBar展开的高度 expandedHeight: 200, flexibleSpace: buildFlexibleSpaceBar(), bottom: buildTabBar(), ), ]; }, ///主体部分 body: buildTabBarView(), ); }body对应的是页面主体部分，使用 TabBarView 装载了三个 Widget ，当然在实际应用场景中，你也可以使用独立的 StatefulWidget 来使用，代码如下：
TabBarView buildTabBarView() { return TabBarView( controller: tabController, children: <Widget>[ SingleChildScrollView( child: Container( alignment: Alignment.bottomLeft, child: Text("这是第一个页面"), height: 1000, ), ), Text( "这是第二个页面", style: TextStyle(color: Colors.blue), ), Text( "这是第三个页面", style: TextStyle(color: Colors.red), ), ], ); }当然这里使用到了一个 TabController ，是在 初始化函数中 initState 中创建的，代码如下：
TabController tabController; @override void initState() { super.initState(); ///这里的 3 代表有三个子 Item ///应用到 TabBarView 中，对应其中3个子Item ///应用到 TabBar中，对应其中32上子Item tabController = new TabController(length: 3, vsync: this); }上述创建的 TabController 是绑定 TabBarView 与 TabBar 的联动的，当然 TabBar是配置在 SliverAppBar 中的 bottom 属性下，通过 buildTabBar 方法来封装的， 代码如下：
TabBar buildTabBar() { return TabBar( controller: tabController, tabs: <Widget>[ new Tab( text: "标签一", ), new Tab( text: "标签二", ), new Tab( text: "标签三", ), ], ); }最后就是折叠隐藏部分的图片部分，是在 SliverAppBar 的 flexibleSpace 属性中配置的，当然就是使用了 FlexibleSpaceBar，代码如下：
String imageUrl = "https://timgsa.baidu.com/timg?demo.image&quality=80&size=b9999_10000&sec=1578583093&di=0bf687d9589dc5c6c0778de9576ee077&imgtype=jpg&er=1&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201403%2F28%2F111010vhgc45hkh41f1mfd.jpg"; FlexibleSpaceBar buildFlexibleSpaceBar() { return FlexibleSpaceBar( // title: Text("FlexibleSpaceBar title"), centerTitle: true, background: Container( color: Colors.blue[300], child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( height: 150, child: Image.network( imageUrl, fit: BoxFit.fill, height: 160, width: 400, ), ), ], ), ), ); }完毕
当然 以小编的性格，是必须有源码的：本文章的全部代码在这里
早起的年轻人 认证博客专家 移动开发 项目管理 Java 只要用心去做，每一件事情还是有可能成功的，当然成功是没有界限的，只不过是达到自己心里的那个目标,公众号：我的大前端生涯，一个爱喝茶的程序员，通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.