题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。
Flutter是谷歌推出的最新的移动开发框架。
Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景，如向上滑动视图时，要折叠隐藏一部分内容，这时候就需要使用到 NestedScrollView 与 SliverAppBar 的结合使用。
在本节中是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现的折叠头部效果
本 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,
),
),
],
),
),
);
}完毕
当然 以小编的性格，是必须有源码的：本文章的全部代码在这里
