Flutter AnimatedList 使用解析
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。
在 Flutter 中 ,AnimatedList 、ListView 、SliverListView 、SliverAnimatedList 用来显示列表数据样式,一般情况下 使用 ListView 就可实现大部分业务需求,AnimatedList 的特点是可以在插入数据与移除数据的时候添加动画效果
如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。
- Flutter 从入门 到精通系列文章在这里
- 当然也必需是要有源码的 在这里了
- github 有点慢 不妨来看看码云的源码吧
- 系列学习教程在这里
本文章实现的效果是
AnimatedList 简述
const AnimatedList({Key? key,required this.itemBuilder,this.initialItemCount = 0,this.scrollDirection = Axis.vertical,this.reverse = false,this.controller,this.primary,this.physics,this.shrinkWrap = false,this.padding,this.clipBehavior = Clip.hardEdge,})
- itemBuilder 子 Item UI布局构建
- initialItemCount 列表显示的条目 个数
- scrollDirection 滑动方向
- reverse scrollDirection 为 Axis.vertical 时,如果 reverse 为ture ,那么列表内容会自动滑动到底部
- controller 滑动控制器
- physics 滑动效果控制 ,BouncingScrollPhysics 是列表滑动 iOS 的回弹效果;AlwaysScrollableScrollPhysics 是 列表滑动 Android 的水波纹回弹效果;ClampingScrollPhysics 普通的滑动效果;
- shrinkWrap 为true的时候 AnimatedList 会包裹所有的子Item
本实例 Demo
首先是我初始化了点数据‘
List<String> _list = [];GlobalKey<AnimatedListState> _globalKey = new GlobalKey();@overridevoid initState() {super.initState();for (int i = 0; i < 10; i++) {_list.add("早起的年轻人 $i");}}
然后就是 AnimatedList 的使用如下:
AnimatedList buildAnimatedList() {return AnimatedList(//关键keykey: _globalKey,//列表个数initialItemCount: _list.length,//每个子ItemitemBuilder:(BuildContext context, int index, Animation<double> animation) {return buildSizeTransition(animation, index);},);}
然后列表中的每个 Item 的 UI 布局构建如下
SizeTransition buildSizeTransition(Animation<double> animation, int index) {//来个动画return SizeTransition(//动画构建sizeFactor: animation,//子UIchild: SizedBox(height: 80.0,child: Card(color: Colors.primaries[index % Colors.primaries.length],child: Center(child: Text('Item $index ${_list[index]}',),),),),);}
然后我们插入一条数据
//插入源数据_list.insert(0, "插入数据 ${DateTime.now()}");//插入动画效果_globalKey.currentState.insertItem(0,//插入的位置 duration: Duration(milliseconds: 400),);},
然后移除一条数据
//移除源数据_list.removeAt(0);//移除动画效果_globalKey.currentState.removeItem(0,(BuildContext context, Animation<double> animation) {return buildSizeTransition(animation, 0);},);
Flutter AnimatedList 使用解析相关推荐
- Flutter 路由原理解析
前言 这一次,我尝试以不贴一行源代码的方式向你介绍 Flutter 路由的实现原理,同时为了提高你阅读源码的积极性,除了原理介绍以外,又补充了两个新的模块:从源码中学习到的编程技巧,以及 阅读源码之后 ...
- 融云 Flutter IM SDK 解析
最近准备使用融云的 Flutter SDK,所以顺便记录一下. 融云 Flutter IM SDK 地址:传送门 融云的 Flutter SDK 是基于 融云 IMLib 层做的封装,封装了 IMLi ...
- Flutter 手势GestureDetector解析
对于移动端的开发者来说,手势是一个非常重要的模块,基本上做任何App都会遇到各种各样的手势问题,而手势也是移动的一个不算小的模块吧,要彻底搞得还是得费一些时间的,如果之前对Android或者IOS的手 ...
- Flutter JSON数据解析
文章目录 Flutter JSON解析 基本使用 定义bean类 解析Json 解析JsonArray 自动生成Model类 添加依赖 编写代码 执行命令 在线网站生成 JsonToDart插件生成 ...
- Flutter 动画全解析(动画四要素、动画组件、隐式动画组件原理等)
本文通过拆解 Flutter 中动画的实现方式以及原理来介绍动画实现的整个过程. 1. 动画四要素 动画在各个平台的实现原理都基本相同,是在一段时间内一系列连续变化画面的帧构成的.在 Flutter ...
- flutter AnimatedPositionedDirectional 使用解析
在 Flutter 中,AnimatedPositionedDirectional 组件应用在 Stack 中,当位置或者是大小改变时,呈动画效果 const AnimatedPositionedDi ...
- Flutter AnimatedAlign 使用解析
在Flutter中, Align 可以用来实现 Widget的对齐排版. 在Flutter中, AnimatedAlign 可以用来实现 Widget的对齐排版变化时形成一个动画过渡,也是一种简单的动 ...
- Flutter 初始化工程解析
工程目录介绍 代码介绍 示例代码在 mian.dart 这个文件中,将代码折叠可以发现,除了main函数,还有三个class main函数: void main() {runApp(const MyA ...
- Flutter 项目开发指导 从基础入门到精通使用目录
Flutter 从入门 到精通系列文章 本文章为 Flutter 开发中的经验积累分享.教程分享.开发笔记分享目录,持续维护中. 题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Fl ...
最新文章
- linux 网络相关,Linux系统管理员必备的21个网络相关监控
- 白盒测试-条件覆盖-短路陷阱
- python绘制函数曲线x2sin(x2-x-2)_下面哪几个选项中的语句能够完成用fplot语句来绘制函数y=x^3+2*x^2+sin(x)在区间[-5,5]上的图形。...
- 启动服务_用控制台启动一个wcf服务
- 天书夜读:从汇编语言到Windows内核编程笔记(3)
- 百度地图infowindow上添加自定义点击事件
- 钉钉如何调整组织架构_钉钉组织架构与员工同步指南
- Jmeter性能测试-插件
- 打造企业级云深度学习平台——小米云深度学习平台的架构设计与实现
- html图片左侧留白,HTML+CSS布局img图片元素出现空白的问题
- 机械臂6D姿态检测(RGB、RGBD、雷达)综述
- ajax和flash,flask ajax请求后flash方法(消息闪现)无效问题的解决方法
- 无法安装64位office,因为已有32位版本……解决办法
- chrome浏览器的默认超时时间
- 黑马程序员——网络编程
- 2006-2010年美国纽约市空气中一氧化碳污染情况分析
- 信息化天灾人祸启示录(转)
- Linuxnbsp;2.6.19.xnbsp;内核编…
- 微信公众号发送小程序卡片_微信公众号将能够直接给用户推送小程序卡片,社交电商开始发力...
- DataStage记录
热门文章
- Nature、Science、Cell全加入!80家学术机构新冠研究全部免费
- 百度AI快车道深圳专场,揭秘CV目标检测核心技术
- Python学习:快速搭建python环境
- 重磅 | 《机器学习综述》算法分类及特征工程手推笔记!
- 北大师兄告诉你,怎样顺利完成自己的博士生涯
- Python中append()和extend方法的使用和区别
- 逐行创建、读取并写入txt(matlab) 生成文件夹里文件名的.bat文件
- c语言 强制转换 作用域,C语言之总结1详解
- python中pygame输入换行文字,Pygame:写多行
- Centos7 防火墙开启端口