AnimatedList 介绍及使用
时间:2022-07-24
本文章向大家介绍AnimatedList 介绍及使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
AnimatedList提供了一种简单的方式使列表数据发生变化时加入过渡动画,AnimatedList实现“左进右出”动画效果如下:
AnimatedList主要属性如下表。
属性 |
说明 |
---|---|
itemBuilder |
一个函数,列表的每一个索引会调用,这个函数有一个animation参数,可以设置成任何一个动画 |
initialItemCount |
item的个数 |
scrollDirection |
滚动方向,默认垂直 |
controller |
scroll控制器 |
列表数据的插入和删除有进出场动画需要调用AnimatedListState指定的方法,只删除原数据并调用setState方法是没有动画效果的,对应方法如下:
AnimatedListState.insertItem
AnimatedListState.removeItem
AnimatedListState是AnimatedList的状态类,获取AnimatedListState有两个方法:
1) 通过AnimatedList.of(context)方法,代码如下:
AnimatedList.of(context).insertItem(index);
AnimatedList.of(context).removeItem(index, (context,animation)=>{});
2) 通过设置key,用法如下:
final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
AnimatedList(
key: _listKey,
initialItemCount: _list.length,
itemBuilder: (BuildContext context, int index, Animation animation) {
return _buildItem(_list[index].toString(), animation);
},
)
调用如下:
_listKey.currentState.insertItem(_index);
需要注意的是AnimatedListState.insertItem或者AnimatedListState.removeItem并不会更新实际数据,需要手动处理。
下面的代码实现了“左进右出”的动画效果:
class AnimatedListDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => _AnimatedListDemo();
}
class _AnimatedListDemo extends State<AnimatedListDemo>
with SingleTickerProviderStateMixin {
List<int> _list = [];
final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
void _addItem() {
final int _index = _list.length;
_list.insert(_index, _index);
_listKey.currentState.insertItem(_index);
}
void _removeItem() {
final int _index = _list.length - 1;
var item = _list[_index].toString();
_listKey.currentState.removeItem(
_index, (context, animation) => _buildItem(item, animation));
_list.removeAt(_index);
}
Widget _buildItem(String _item, Animation _animation) {
return SlideTransition(
position: _animation.drive(CurveTween(curve: Curves.easeIn)).drive(Tween<Offset>(begin: Offset(1,1),end: Offset(0,1))),
child: Card(
child: ListTile(
title: Text(
_item,
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedList(
key: _listKey,
initialItemCount: _list.length,
itemBuilder: (BuildContext context, int index, Animation animation) {
return _buildItem(_list[index].toString(), animation);
},
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
onPressed: () => _addItem(),
child: Icon(Icons.add),
),
SizedBox(
width: 60,
),
FloatingActionButton(
onPressed: () => _removeItem(),
child: Icon(Icons.remove),
),
],
),
);
}
}
动画效果如下:
实现从上掉落的效果,只需将_buildItem方法代码修改如下即可:
Widget _buildItem(String _item, Animation _animation) {
return SizeTransition(
sizeFactor: _animation,
child: Card(
child: ListTile(
title: Text(
_item,
),
),
),
);
}
动画效果如下:
- 轻松初探 Python 篇(五)—dict 和 set 知识汇总
- 全面解析C#中的异步编程为什么要异步过去糟糕的体验一个新的方式Tasks基于任务的异步编程模型Async和await时间处理程序和无返回值的异步方法结束语
- CSS深入理解学习笔记之absolute
- 5个经典的JavaScript面试题
- 轻松初探 Python 篇(四)—list tuple range 知识汇总
- CSS深入理解学习笔记之overflow
- Python爬虫实践——简单爬取我的博客
- Python爬虫入门(二)
- 在ASP.NET MVC5应用程序中快速接入QQ和新浪微博OAuth起步创建应用程序使用NUGET更新OWIN中间件启动SSL支持申请腾讯QQ的Oauth申请新浪微博的Oauth快速接入资源地址&源码
- 有趣的算法(六) ——Find-Union算法
- 有趣的算法(七) ——快速排序改进算法
- 编写你人生中第一个机器学习代码吧!
- 使用Octave来学习Machine Learning(二)
- RESTful API的十个最佳实践1. 使用名词而不是动词 2. Get方法和查询参数不应该改变资源状态3. 使用名词的复数形式 4. 为关系使用子资源 5. 使用HTTP头决定序列化格式 6. 使
- 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 数组属性和方法
- Android 蓝牙开发(扫描设备、绑定、解绑)
- Python 微信机器人:调用电脑摄像头时时监控功能实现演示,调用电脑摄像头进行拍照并保存。
- Android 天气APP(十九)更换新版API接口(更高、更快、更强)
- Android 天气APP(二十)增加欢迎页及白屏黑屏处理、展示世界国家/地区的城市数据
- Android 天气APP(二十二)改动些许UI、增加更多空气质量数据和生活建议数据展示
- Android 自定义View 之 RectF用法详解
- Android 天气APP(二十五)地图天气(下)嵌套滑动布局渲染天气数据
- Android 天气APP(二十六)增加自动更新(检查版本、通知栏下载、自动安装)
- Android 天气APP(二十七)增加地图天气的逐小时天气、太阳和月亮数据
- Android 天气APP(二十八)地图搜索定位
- DevEco Studio项目构建讲解、编写页面、布局介绍、页面跳转
- Android 天气APP(二十九)壁纸设置、图片查看、图片保存
- Chrome 私人珍藏-stylus插件实现个性化百度界面定制
- Python 基础篇-简单的异常捕获
- Python 技巧篇-让我的程序暂停一下