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

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

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

flutter桌面小部件？CustomScrollView 用来处理更为复杂的布局结合 SliverAppBar，SliverList和SliverGrid SliverPadding SliverToBoxAdapter SliverPersistentHeader, SliverFillRemaining，SliverFillViewport等来使用

在本节中是使用 CustomScrollView 结合 SliverAppBar 与
SliverList实现的一个向上滑动折叠头部图片的经典布局效果

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

css滑动效果？【x2】各种系列的视频教程 免费开源 关注 你不会迷路

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

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

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

一般页面的主体使用 Scaffold ，所以在这里也是使用了 Scaffold 来架构页面，如下代码清单1-1所示：

///代码清单 1-1 
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class CustomScrollDemoPage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return _ScrollHomePageState();}
}class _ScrollHomePageState extends State{///图片地址String imageUrl ="http://file02.16sucai.com/d/file/2015/0408/779334da99e40adb587d0ba715eca102.jpg";@overrideWidget build(BuildContext context) {///页面主体脚手架return Scaffold(/// 处理滑动body: CustomScrollView(slivers: <Widget>[///顶部的标题图片部分buildSliverAppBar(),///底部的列表部分buildSliverList()],));}
}... ... 
}

在这里使用了CustomScrollView结合了SliverAppBar 与 SliverList 实现的整体效果，其中 buildSliverAppBar 方法是用来构建 SliverAppBar的，如下代码清单 1-2所示：

///代码清单1-2
SliverAppBar buildSliverAppBar() {return SliverAppBar(backgroundColor: Colors.pink,pinned: true,snap: false,floating: true,leading: Icon(Icons.home),actions: <Widget>[Icon(Icons.menu)],title: Text("这里是标题"),expandedHeight: 180,flexibleSpace: FlexibleSpaceBar(background: Row(children: <Widget>[Expanded(child: Image.network(imageUrl,fit: BoxFit.cover,),)],),),);
}

buildSliverList方法是用来构建 列表组件 SliverList，如下代码清单 1-3 所示：

///代码清单1-3
SliverList buildSliverList() {return SliverList(///懒加载代理delegate: SliverChildBuilderDelegate((BuildContext context, num index) {///子Item的布局 return Container(height: 44,margin: EdgeInsets.only(bottom: 10),child: Text("item- $index"),);}, childCount: 100),//子Item的个数);
}

完毕

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