当前位置：网站首页>还在用 ListView？使用 AnimatedList 让列表元素动起来

还在用 ListView？使用 AnimatedList 让列表元素动起来

2022-04-23 20:05:00 【岛上码农】

前言

列表是移动应用中用得最多的组件了，我们也会经常对列表元素进行增加或删除操作，最简单的方法是列表数据变动后，直接 setState 更新列表界面。这种方式存在一个缺陷就是列表元素会突然消失（删除）或出现（添加），当列表元素内容接近时，我们都没法知道操作是否成功了。而如果能够有动效展示这个消失和出现的过程，那么体验就会好很多，比如下面的这种效果，删除元素的时候，会有个逐渐消失的动画，而添加元素的时候会有渐现效果。

这里使用到的就是 AnimatedList，本篇文章的示例代码主要来自官方文档:AnimatedList 组件。需要注意的是，毕竟列表带了动画效果，对性能肯定会有影响，建议只对需要对元素进行删除、增加操作的小数据量的列表使用。

AnimatedList 介绍

AnimatedList 是 ListView 的替代，构造函数基本上和 ListView 一致。

const AnimatedList({
  Key? key,
  required this.itemBuilder,
  this.initialItemCoun

版权声明
本文为[岛上码农]所创，转载请带上原文链接，感谢
https://blog.csdn.net/shuijian00/article/details/124362050

当前位置：网站首页>还在用 ListView？使用 AnimatedList 让列表元素动起来

还在用 ListView？使用 AnimatedList 让列表元素动起来

前言

AnimatedList 介绍

边栏推荐

猜你喜欢

随机推荐