Flutter AnimatedList 使用解析

谁践踏了优雅 2023-10-07 16:56 8阅读 0赞

> 志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

在 Flutter 中 ，AnimatedList 、ListView 、SliverListView 、SliverAnimatedList 用来显示列表数据样式，一般情况下 使用 ListView 就可实现大部分业务需求，AnimatedList 的特点是可以在插入数据与移除数据的时候添加动画效果

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

*  [Flutter 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢 不妨来看看码云的源码吧][github _]
 *  [系列学习教程在这里][Link 2]

本文章实现的效果是

![在这里插入图片描述][ce0a616b6eab4dd7b9ab885f2a2ed0ff.gif_pic_center]

##### 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();
    
      @override
      void initState() {
        
        super.initState();
        for (int i = 0; i < 10; i++) {
        
          _list.add("早起的年轻人 $i");
        }
      }

然后就是 AnimatedList 的使用如下：

AnimatedList buildAnimatedList() {
        
        return AnimatedList(
          //关键key
          key: _globalKey,
          //列表个数
          initialItemCount: _list.length,
          //每个子Item
          itemBuilder:
              (BuildContext context, int index, Animation<double> animation) {
        
            return buildSizeTransition(animation, index);
          },
        );
      }

然后列表中的每个 Item 的 UI 布局构建如下

SizeTransition buildSizeTransition(Animation<double> animation, int index) {
        
        //来个动画
        return SizeTransition(
          //动画构建
          sizeFactor: animation,
          //子UI
          child: 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 _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github _]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[ce0a616b6eab4dd7b9ab885f2a2ed0ff.gif_pic_center]: https://img-blog.csdnimg.cn/ce0a616b6eab4dd7b9ab885f2a2ed0ff.gif#pic_center