Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。
Flutter是谷歌推出的最新的移动开发框架。
Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景,如向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar 的结合使用。
在本节中是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现的折叠头部效果undefined
本 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,
),
),
],
),
),
);
}
完毕
当然 以小编的性格,是必须有源码的:本文章的全部代码在这里
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- leetcode链表之删除链表的节点
- Windows 技术篇-通过注册表查找vc运行库所在位置实战演示,通过ProductCode查看vc++运行库安装位置
- Python 库安装问题-whl is not a supported wheel on this platform.原因及解决办法
- 安装Go运行环境
- Python 语法问题-module 'pip' has no attribute 'pep425tags',告诉你如何正确查看pip支持,32位、64位查看pip支持万能方法
- 使用matplotlib绘制3D图表
- 微服务的用户认证与授权杂谈(下)
- Python 库安装问题-用pip安装pyHook3报错,原因及解决办法
- 微服务的用户认证与授权杂谈(上)
- Python 技术篇-win32、amd64结尾的whl库该选哪个,如何查看python平台支持
- Python 基础篇-pip卸载python库方法,pip命令大全
- Python 技术篇-pip安装的python库缓存位置查看方法,如何查看python库源码
- Redis持久化 - RDB和AOF
- Python 技术篇-pip只下载python库不安装方法,pip命令大全
- Python 技术篇-将项目打包成whl文件,whl包的制作方法