【Flutter 专题】131 图解 AnimatedList 动画列表

举报
阿策小和尚 发表于 2022/04/28 08:54:03 2022/04/28
【摘要】 0 基础学习 Flutter,第一百三十一步:尝试 AnimatedList 动画列表!

    小菜在使用列表加载数据项时,为了提高用户浏览体验,在增加删除 Item 项时适当增加一点小动画,于是小菜通过 AnimatedList 简单尝试一下;

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,                   // 内边距
})

    AnimatedList 作为可以在子 Item 数据发生变化时提供简单过渡动画的一类 List;通过 AnimatedListState 用于动态的增加或删除 Item;提供了 itemBuilder & initialItemCountListView.builder 方式类似;

    简单分析源码可得,AnimatedListState 已混入 TickerProviderStateMixin,因此我们的开发的 Page 页可以略去状态混入,可以通过 insertItem & removeItem 为数据增删时调整过渡动画;

案例尝试

1. itemBuilder & initialItemCount

    AnimatedList 通过 Builder 方式构建的一个优势就是列表项仅在滚动到视图内时才会构建;而 AnimatedListState 需要 GlobalKey 用于与列表交互的媒介,小菜理解每个 Item 都是单独区分开的;小菜先尝试一个 FadeTransition 淡入淡出动画效果;

class _AnimatedListPageState extends State<AnimatedListPage> {
  final key = GlobalKey<AnimatedListState>();
  static final List<UserBean> animatedList = [
    UserBean('Monday', 'images/icon_hzw01.jpg'),
    UserBean('Tuesday', 'images/icon_hzw02.jpg'),
    UserBean('Wednesday', 'images/icon_hzw03.jpg'),
    UserBean('Thursday', 'images/icon_hzw01.jpg'),
    UserBean('Friday', 'images/icon_hzw02.jpg'),
    UserBean('Saturday', 'images/icon_hzw03.jpg'),
    UserBean('Sunday', 'images/icon_hzw01.jpg')
  ];
  static final addItem = UserBean('Add Item', 'images/icon_music.png');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(title: Text('AnimatedList Page')),
        body: AnimatedList(
            key: key,
            initialItemCount: animatedList.length,
            itemBuilder: (context, index, animation) => _buildItem(animatedList[index], index, animation)),
        floatingActionButton: FloatingActionButton(
            onPressed: () => _insertItem(animatedList.length, addItem),
            child: Icon(Icons.add, color: Colors.white)));
  }

  _buildItem(item, index, animation) => FadeTransition(opacity: animation, child: _itemWid(item, index));

  _itemWid(item, index) => Container(
      margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 1.0),
      child: Card(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 10.0),
              child: Row(children: [
                CircleAvatar(backgroundImage: AssetImage(item.avatar)),
                SizedBox(width: 15.0),
                Expanded(child: Text(item.name)),
                GestureDetector(child: Icon(Icons.clear), onTap: () => _removeItem(index))
              ]))));
}

class UserBean {
  String name;
  String avatar;

  UserBean(this.name, this.avatar);
}

    其中在增加和删除 Item 时通过 AnimatedListState 提供的方法进行操作,并非直接对 AnimatedList 数据进行的更新,需要手动更新;

// of 方式
AnimatedList.of(context).insertItem(index);
AnimatedList.of(context).removeItem(index, (context,animation) => null);

// GlobalKey 方式
_insertItem(index, item) {
  animatedList.insert(index, item);
  key.currentState.insertItem(index);
}

_removeItem(index) {
  final item = animatedList.removeAt(index);
  key.currentState.removeItem( index, (context, animation) => _buildItem(item, index, animation));
}

2. reverse & primary & physics

    AnimatedListListView.builder 方式基本一致,但需要注意的是,不管是 ListView 还是 AnimatedList 默认都是会填充整个布局,在设置 reverse 时会发现是从屏幕最底部作为起始位的;

reverse: true,

3. animation

    AnimatedList 的过度动画是通过 AnimatedListItemBuilder 构造器中提供的 Animation<double> 来进行构建的,默认时常是 300ms,小菜多尝试一下其他的过渡动画;

3.1 SlideTransition -> 左入左出
_buildItem2(item, index, animation) => SlideTransition(
    position: Tween<Offset>(begin: Offset(-1, 0), end: Offset(0, 0)).animate(
        CurvedAnimation(
            parent: animation,
            curve: Curves.linear,
            reverseCurve: Curves.linear)),
    child: _itemWid(item, index));

3.2 SlideTransition & SizeTransition -> 上入上出 & 尺寸渐变
_buildItem3(item, index, animation) => SlideTransition(
    position: Tween<Offset>(begin: Offset(0, -1), end: Offset(0, 0)).animate(
        CurvedAnimation(
            parent: animation,
            curve: Curves.linear,
            reverseCurve: Curves.linear)),
    child: _itemWid(item, index));

3.3 SlideTransition & SizeTransition & FadeTransition -> 上入上出 & 尺寸 & 透明度渐变
_buildItem4(item, index, animation) => SlideTransition(
    position: Tween<Offset>(begin: Offset(0, -1), end: Offset(0, 0))
        .animate(animation),
    child: FadeTransition(
        opacity: animation,
        child: SizeTransition(
            axis: Axis.vertical,
            sizeFactor: animation,
            child: _itemWid(item, index))));


    AnimatedList 案例源码


    小菜对 AnimatedList 的尝试还很少,主要尝试了过渡渐变的小动画;如有错误,请多多指导!

来源: 阿策小和尚

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。