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

2022-06-02 23:53:55

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

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,
             ),
           ),
         ],
       ),
     ),
   );
 }

完毕

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

码农公寓

相关文章