技术标签: flutter中列表增加表头 flutter中增加区头 滑动监听 Flutter Slivers
我们考虑一个这样的布局:一个滑动的视图中包括一个标题视图(HeaderView),一个列表视图(ListView),一个网格视图(GridView)。
我们怎么可以让它们做到统一的滑动效果呢?使用前面的滚动是很难做到的。
Flutter中有一个可以完成这样滚动效果的Widget:CustomScrollView,可以统一管理多个滚动视图。
在CustomScrollView中,每一个独立的,可滚动的Widget被称之为Sliver。
因为我们需要把很多的Sliver放在一个CustomScrollView中,所以CustomScrollView有一个slivers属性,里面让我们放对应的一些Sliver:
SliverList:类似于我们之前使用过的ListView;
SliverFixedExtentList:类似于SliverList只是可以设置滚动的高度;
SliverGrid:类似于我们之前使用过的GridView;
SliverPadding:设置Sliver的内边距,因为可能要单独给Sliver设置内边距;
SliverAppBar:添加一个AppBar,通常用来作为CustomScrollView的HeaderView;
SliverSafeArea:设置内容显示在安全区域(比如不让齐刘海挡住我们的内容)
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverSafeArea(
sliver: SliverPadding(
padding: EdgeInsets.all(8),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment(0, 0),
color: Colors.orange,
child: Text("item$index"),
);
},
childCount: 20
),
),
),
)
],
);
}
}
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return showCustomScrollView();
}
Widget showCustomScrollView() {
return new CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Coderwhy Demo'),
background: Image(
image: NetworkImage(
"https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg",
),
fit: BoxFit.cover,
),
),
),
new SliverGrid(
gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 10,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: new Text('list item $index'),
);
},
childCount: 20
),
),
],
);
}
}
对于滚动的视图,我们经常需要监听它的一些滚动事件,在监听到的时候去做对应的一些事情。
比如视图滚动到底部时,我们可能希望做上拉加载更多;
比如滚动到一定位置时显示一个回到顶部的按钮,点击回到顶部的按钮,回到顶部;
比如监听滚动什么时候开始,什么时候结束;
在Flutter中监听滚动相关的内容由两部分组成:ScrollController和ScrollNotification。
ListView、GridView的组件控制器是ScrollController,我们可以通过它来获取视图的滚动信息,并且可以调用里面的方法来更新视图的滚动位置。
另外,通常情况下,我们会根据滚动的位置来改变一些Widget的状态信息,所以ScrollController通常会和StatefulWidget一起来使用,并且会在其中控制它的初始化、监听、销毁等事件。
我们来做一个案例,当滚动到1000位置的时候,显示一个回到顶部的按钮:
jumpTo(double offset)
、animateTo(double offset,...)
:这两个方法用于跳转到指定的位置,它们不同之处在于,后者在跳转时会执行一个动画,而前者不会。ScrollController间接继承自Listenable,我们可以根据ScrollController来监听滚动事件。
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
ScrollController _controller;
bool _isShowTop = false;
@override
void initState() {
// 初始化ScrollController
_controller = ScrollController();
// 监听滚动
_controller.addListener(() {
var tempSsShowTop = _controller.offset >= 1000;
if (tempSsShowTop != _isShowTop) {
setState(() {
_isShowTop = tempSsShowTop;
});
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListView展示"),
),
body: ListView.builder(
itemCount: 100,
itemExtent: 60,
controller: _controller,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text("item$index"));
}
),
floatingActionButton: !_isShowTop ? null : FloatingActionButton(
child: Icon(Icons.arrow_upward),
onPressed: () {
_controller.animateTo(0, duration: Duration(milliseconds: 1000), curve: Curves.ease);
},
),
);
}
}
如果我们希望监听什么时候开始滚动,什么时候结束滚动,这个时候我们可以通过
NotificationListener
。
NotificationListener是一个Widget,模板参数T是想监听的通知类型,如果省略,则所有类型通知都会被监听,如果指定特定类型,则只有该类型的通知会被监听。
NotificationListener需要一个onNotification回调函数,用于实现监听处理逻辑。
该回调可以返回一个布尔值,代表是否阻止该事件继续向上冒泡,如果为
true
时,则冒泡终止,事件停止向上传播,如果不返回或者返回值为false
时,则冒泡继续。
class MyHomeNotificationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyHomeNotificationDemoState();
}
class MyHomeNotificationDemoState extends State<MyHomeNotificationDemo> {
int _progress = 0;
@override
Widget build(BuildContext context) {
return NotificationListener(
onNotification: (ScrollNotification notification) {
// 1.判断监听事件的类型
if (notification is ScrollStartNotification) {
print("开始滚动.....");
} else if (notification is ScrollUpdateNotification) {
// 当前滚动的位置和总长度
final currentPixel = notification.metrics.pixels;
final totalPixel = notification.metrics.maxScrollExtent;
double progress = currentPixel / totalPixel;
setState(() {
_progress = (progress * 100).toInt();
});
print("正在滚动:${notification.metrics.pixels} - ${notification.metrics.maxScrollExtent}");
} else if (notification is ScrollEndNotification) {
print("结束滚动....");
}
return false;
},
child: Stack(
alignment: Alignment(.9, .9),
children: <Widget>[
ListView.builder(
itemCount: 100,
itemExtent: 60,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text("item$index"));
}
),
CircleAvatar(
radius: 30,
child: Text("$_progress%"),
backgroundColor: Colors.black54,
)
],
),
);
}
}
文章浏览阅读6.3k次,点赞5次,收藏49次。一、从零开始建设企业信息安全系统:企业信息安全体系分为:信息安全技术体系和信息安全管理体系 信息安全技术体系: 两个层面: 1.需建设安全相关基础设施和系统,以具备解决相关安全问题的能力。 2.需具备安全运营能力,只有正确部署和使用设备,才能真正保障信息安全。 信息安全管理体系: 两个层面: 1.具备信息安全相关的制度、规范、流程及策略。 2.具..._信息安全运营服务实施指南研究
文章浏览阅读455次。import osimport shutil def select_file(dir, dir_out): # dir为查询文件路径,dir_out为拷贝路径 if os.path.isfile(dir): if(dir[-4:] == '.bmp' or '.jpg' or 'png'): #拷贝所有以上格式的文件,也可以修改为其他格式 filename = dir.split('\\')[-1] # 提取文件名称 s_python遍历所有文件复制指定文件?tn=02003390_71_hao_pg
文章浏览阅读5.1k次,点赞17次,收藏10次。https://pan.baidu.com/s/1IV_lBCeFFM712xx_iXnhqQ 提取码:0pr5_win11 cudatookit安装包 百度云
文章浏览阅读2.1k次。springboot项目的css 和js默认位置是在static中,所以如果没有另外的修改的话,直接创建一个static文件夹,把css和js放入即可。这里放一个实例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>儿童随访记录表</title> <!-- 引入 echarts.js --> <script src="ht._springboot thymeleaf 不显示css js
文章浏览阅读2.1k次。这里还可以选择背景编辑以更换背景,虚拟人物的位置可以调整,都设置完成后,点击播放按钮,即可播放效果。(ps:未导出视频之前,数字人只是静态。)最后点击’合成’按钮,导出视频。_chatgpt + ai 数字人 csdn
文章浏览阅读1.6w次。默认参数并非编程方面的重大突破,而只是提供了一种便捷的方式。在以后设计类时你将发现,通过使用默认参数,可以减少要定义的析构函数、方法以及方法重载的数量。_c++函数默认值在参数列表中在后面还是在前面
文章浏览阅读42次。1.表单中get与post提交方法的区别? get是发送请求HTTP协议通过url参数传递进行接收,而post是实体数据,可以通过表单提交大量信息.而且post提交方式比get提交方式安全。2. 用最少的代码写一个求3值最大值的函数? function($a,$b,$c){ return $a>$b? ($a>$c? $a : $c) : ($b>$...
文章浏览阅读2w次,点赞19次,收藏226次。我们在做开发任务时可能会创建多个项目,这些项目可能会依赖于不同的Python环境。比如有的用到Python3.6、有的用到Python3.7;有的用Pytorch开发、有的用TensorFlow开发。这时我们需要为不同的项目分别提供所需的版本和依赖项放到不同的虚拟环境中,这样可以将各项目所需环境隔离开,让项目之间不会起冲突。_anaconda 虚拟环境
文章浏览阅读3.3k次,点赞5次,收藏23次。文章目录1. TensorFlow Serving安装1.1. 拉取镜像1.2. 下载官方代码1.3. 运行TF Serving1.4. 客户端验证2. 将ckpt模型转换为pb模型3. 模型部署4. 多模型部署4.1 多(单)用户单模型4.2 多(单)用户多模型4.3. 接口请求5. 新增模型6. 可能出现的错误错误1:错误2:错误3:错误4:错误5:错误6:错误7:错误8TensorFlow..._tensorflow serving 切换模型
文章浏览阅读453次。::after伪元素增加小箭头样式_::after箭头
文章浏览阅读1.9w次,点赞14次,收藏83次。参考链接:http://www.cnblogs.com/xianglan/archive/2011/01/01/1923779.html主思路和程序基本上都是参考博主的,只是在思路理解上和Python3的一些小修改.首先是算法原理介绍:图像细化:图像细化主要是针对二值图而言,所谓骨架,可以理解为图像的中轴,,一个长方形的骨架,是它的长方向上的中轴线,圆的骨架是它的圆心,直线的骨架是它自身,孤立点的..._cv2.thin
文章浏览阅读2w次,点赞6次,收藏10次。一.问题背景Windows需要在安装某些库的时候需要自己编译,但如果本机没有对应的编译的环境,就会产生如下报错: Building wheel for fasttext (setup.py) ... error ERROR: Command errored out with exit status 1: command: 'c:\users\jayce\anaconda3\envs\pdocr\python.exe' -u -c 'import io, os, sys, setupto_microsoft visual c++ build tool离线安装包