AnimatedList導入との使用

AnimatedListは、データ変更のリストに追加されたときにトランジションアニメーションを作るための簡単な方法を提供します。以下は、アニメーションです：

次の表のAnimatedList主な属性。

プロパティ	説明
itemBuilder	機能、通話の各インデックスリストは、この関数は、パラメータのアニメーションを持つ任意のアニメーションを設定することができます
initialItemCount	商品番号
scrollDirection	デフォルトに垂直圧延方向、
コントローラ	スクロールコントローラ

次のようにデータの挿入と削除の一覧には、入口と出口アニメーションだけで、元のデータと通話SETSTATE方法を削除し、指定したメソッドのAnimatedListStateを呼び出す必要がアニメ化されていない、対応があります。

AnimatedListState.insertItem
AnimatedListState.removeItem

AnimatedListStateがAnimatedList状態クラスで、AnimatedListStateを取得する2つの方法があります。

1. AnimatedList.of（コンテキスト）の方法により、以下のように：

AnimatedList.of(context).insertItem(index);
AnimatedList.of(context).removeItem(index, (context,animation)=>{});

次のように2）キーを提供することによって、使用されます。

final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
AnimatedList(
        key: _listKey,
        initialItemCount: _list.length,
        itemBuilder: (BuildContext context, int index, Animation animation) {
          return _buildItem(_list[index].toString(), animation);
        },
      )

次のように呼び出します。

_listKey.currentState.insertItem(_index);

AnimatedListState.insertItemまたはAnimatedListState.removeItemは、実際のデータを更新しないことに注意してください、あなたは手動で処理する必要があります。
：アニメーションの「左右アウト」を達成するために、次のコード

class AnimatedListDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimatedListDemo();
}

class _AnimatedListDemo extends State<AnimatedListDemo>
    with SingleTickerProviderStateMixin {
  List<int> _list = [];
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();

  void _addItem() {
    final int _index = _list.length;
    _list.insert(_index, _index);
    _listKey.currentState.insertItem(_index);
  }

  void _removeItem() {
    final int _index = _list.length - 1;
    var item = _list[_index].toString();
    _listKey.currentState.removeItem(
        _index, (context, animation) => _buildItem(item, animation));
    _list.removeAt(_index);

  }

  Widget _buildItem(String _item, Animation _animation) {
    return SlideTransition(
      position: _animation.drive(CurveTween(curve: Curves.easeIn)).drive(Tween<Offset>(begin: Offset(1,1),end: Offset(0,1))),
      child: Card(
        child: ListTile(
          title: Text(
            _item,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedList(
        key: _listKey,
        initialItemCount: _list.length,
        itemBuilder: (BuildContext context, int index, Animation animation) {
          return _buildItem(_list[index].toString(), animation);
        },
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => _addItem(),
            child: Icon(Icons.add),
          ),
          SizedBox(
            width: 60,
          ),
          FloatingActionButton(
            onPressed: () => _removeItem(),
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

次のようにアニメーション効果は次のとおりです。

次のように落下効果、読み取る単に_buildItem方法コードから実現。

  Widget _buildItem(String _item, Animation _animation) {
    return SizeTransition(
      sizeFactor: _animation,
      child: Card(
        child: ListTile(
          title: Text(
            _item,
          ),
        ),
      ),
    );
  }

アニメーションは次のとおりです。

フラッタージャンプドアシリーズ

この記事はあなたを助けている場合、スキャンコード懸念のサブスクリプション番号を歓迎し、親指は、前方、コメントは、私は報酬を共有し続ける最大の力です。