Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

Flutter是谷歌推出的最新的移动开发框架。
Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景，如向上滑动视图时，要折叠隐藏一部分内容，这时候就需要使用到 NestedScrollView 与 SliverAppBar 的结合使用。

在本节中是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现的折叠头部效果

css滑动效果？【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

【x4】本文章对应的讲解视频在这里

flutter statefulwidget。【x5】本文章的全部代码在这里

本 Demo 实现的最终效果如下：

首先页面的主体 使用的是 Scaffold 脚手架来构建，因为使用到了 TabBar 与 TabBarView ，标签的左右切换是一个动画效果，所以这里也使用到了SingleTickerProviderStateMixin ， 代码如下：

class NetScrollHomePage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return ScrollHomePageState();}
}class ScrollHomePageState extends State with SingleTickerProviderStateMixin {@overrideWidget 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上子ItemtabController = 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,),),],),),);}

完毕

当然 以小编的性格，是必须有源码的：本文章的全部代码在这里