【Flutter 專題】131 圖解 AnimatedList 動畫列表｜8月更文挑戰

阿策小和尚發表於2021-07-31
Flutter圖解動畫

    小菜在使用列表載入資料項時，為了提高使用者瀏覽體驗，在增加刪除 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 & initialItemCount 與 ListView.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

    AnimatedList 與 ListView.builder 方式基本一致，但需要注意的是，不管是 ListView 還是 AnimatedList 預設都是會填充整個佈局，在設定 reverse 時會發現是從螢幕最底部作為起始位的；

reverse: true,
複製程式碼

3. animation

    AnimatedList 的過度動畫是通過 AnimatedListItemBuilder 構造器中提供的 Animation 來進行構建的，預設時常是 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 的嘗試還很少，主要嘗試了過渡漸變的小動畫；如有錯誤，請多多指導！

來源： 阿策小和尚

相關文章