Android实现列表元素动态效果

更新时间：2022年03月29日 14:00:58 作者：岛上码农

本文将利用AnimatedList组件实现列表元素的一些动态效果，例如添加元素时的渐现效果，删除元素逐渐消失的效果等，感兴趣的小伙伴可以了解一下

前言

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

AnimatedList.gif

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

AnimatedList 介绍

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

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 的定义不同，itemBuilder 与 ListView 相比，多了一个 animation 参数：

typedef AnimatedListItemBuilder = Widget Function(
  BuildContext context, 
  int index, 
  Animation<double> animation
);

animation是一个 Animation<double>对象，因此可以使用 animation 来构建元素的过渡动画。比如我们这里的示例就使用了 FadeTransition 来构建列表元素，从而有渐现效果。

class ListItem extends StatelessWidget {
  const ListItem({
    Key? key,
    required this.onRemove,
    required this.animation,
    required this.item,
  }) : super(key: key);

  final Animation<double> animation;
  final ValueChanged onRemove;
  final int item;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(2.0),
      child: FadeTransition(
        opacity: animation,
        child: Container(
          child: Row(children: [
            Expanded(
              child: Text(
                'Item $item',
                style: TextStyle(
                  color: Colors.blue,
                ),
              ),
            ),
            IconButton(
              onPressed: () {
                onRemove(this.item);
              },
              icon: Icon(Icons.delete_forever_rounded, color: Colors.grey),
            ),
          ]),
        ),
      ),
    );
  }
}

元素的插入和删除

使用 AnimatedList 时，我们需要调用 AnimatedListState 的insertItem 和 removeItem 方法来操作，而不能直接操作完数据后刷新界面。也就是在插入和删除数据的时候，应该是先修改列表数据，然后再调用AnimatedListState的 insertItem 或 removeItem 方法来刷新列表界面。例如删除元素的代码：

E removeAt(int index) {
  final E removedItem = _items.removeAt(index);

  if (removedItem != null) {
    _animatedList!.removeItem(
      index,
      (BuildContext context, Animation<double> animation) {
        return removedItemBuilder(removedItem, context, animation);
      },
    );
  }
  return removedItem;
}

这里 removedItem接收两个参数，一个是要移除元素的下标，另一个是一个构建移除元素的方法 builder。之所以要这个方法是因为元素实际从列表马上移除的，为了在动画过渡时间内还能够看到被移除的元素，需要通过这种方式来构建一个被移除的元素来感觉是动画删除的。这里也可以使用 animation 参数自定义动画效果。insertItem 方法没有 builder 参数，它直接将新插入的元素传给 AnimatedList 的 builder 方法来插入新的元素，这样能够保持和列表新增元素的动效一致。

使用 GlobalKey 获取 AnimatedListState

由于 AnimatedList 的所有控制都是在 AnimatedState 中进行的，而 AnimatedState 对象没法直接获取得到，因此需要使用 GlobalKey 来获取 AnimatedListState 对象。在构建 AnimatedList 的时候给 key 属性传入一个 GlobalKey，。然后就可以通过 currentState 获取到 AnimatedListState 对象了。

class _AnimatedListSampleState extends State<AnimatedListSample> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  late ListModel<int> _list;
  late int _nextItem;

  @override
  void initState() {
    super.initState();
    _list = ListModel<int>(
      listKey: _listKey,
      initialItems: <int>[0, 1, 2],
      removedItemBuilder: _buildRemovedItem,
    );
    _nextItem = 3;
  }

  Widget _buildRemovedItem(
      int item, BuildContext context, Animation<double> animation) {
    return ListItem(
      animation: animation,
      item: item,
      onRemove: _remove,
    );
  }

  // Insert the "next item" into the list model.
  void _insert() {
    final int index = _list.length;
    _list.insert(index, _nextItem++);
  }

  // Remove the selected item from the list model.
  void _remove(item) {
    if (item != null) {
      _list.removeAt(_list.indexOf(item!));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AnimatedList'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: _insert,
            tooltip: '添加',
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: AnimatedList(
          key: _listKey,
          initialItemCount: _list.length,
          itemBuilder: (context, index, animation) {
            return FadeTransition(
              opacity: animation,
              child: ListItem(
                onRemove: _remove,
                animation: animation,
                item: _list[index],
              ),
            );
          },
        ),
      ),
    );
  }
}

总结

本篇介绍了 AnimatedList 的使用，对于我们的一些数据量少、又有插入或删除元素操作的列表，可以考虑使用 AnimatedList 来提升用户体验。

到此这篇关于Android实现列表元素动态效果的文章就介绍到这了,更多相关Android列表动态效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Android截屏截图的几种方法总结
这篇文章主要介绍了 Android截屏截图方法汇总（Activity、View、ScrollView、ListView、RecycleView、WebView截屏截图）的相关资料,需要的朋友可以参考下
2017-05-05
Android中Fragment 重叠遮盖问题解决办法
这篇文章主要介绍了Android中Fragment 重叠遮盖问题解决办法的相关资料,需要的朋友可以参考下
2017-05-05
Flutter检查连接网络connectivity_plus实现步骤
这篇文章主要为大家介绍了Flutter检查连接网络connectivity_plus实现步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Android 通过腾讯TBS实现文件预览功能
这篇文章主要介绍了Android 通过腾讯TBS实现文件预览功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
Flutter路由框架Fluro使用教程详细讲解
在Flutter应用开发过程中，除了使用Flutter官方提供的路由外，还可以使用一些第三方路由框架来实现页面管理和导航，Fluro作为一款优秀的Flutter企业级路由框架，Fluro的使用比官方提供的路由框架要复杂一些，但是却非常适合中大型项目
2022-10-10
Android拨号盘支持T9搜索和号码搜索等拨号盘案例
之前做通讯录软件，其中在做拨号盘的时候一直为怎么实现T9输入烦恼，不过最后终于是实现了，看社区内好像也有不少朋友需要，在此分享一下
2012-12-12
android USB如何修改VID具体实现
在android 设备的Linux 内核中把 USB 驱动的 PID VID 修改以后，也许之前的adb工具就不能识别设备了，会打印出"device not found"的提示
2013-06-06
Android中使用 AutoCompleteTextView 实现手机号格式化附带清空历史的操作
有个小伙伴遇到了这样一个问题，就是AutoCompleteTextView实现自动填充的功能。同时要具备手机格式化的功能。接下来通过本文给大家分享使用 AutoCompleteTextView 实现手机号格式化附带清空历史的操作方法，需要的朋友参考下
2017-03-03
Android编程入门之HelloWorld项目目录结构分析
这篇文章主要介绍了Android编程入门之HelloWorld项目目录结构分析,较为详细的分析了Android项目的目录结构与具体作用,需要的朋友可以参考下
2015-12-12
Android开发悬浮窗踩坑解决
这篇文章主要为大家介绍了Android悬浮窗踩坑解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03