Flutter AnimatedList 列表以动画形式动态插入、删除

最新推荐文章于 2025-08-12 09:49:27 发布

原创

最新推荐文章于 2025-08-12 09:49:27 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

此博客演示了如何在 Flutter 应用中使用 AnimatedList 类来创建动态列表，当项被添加或删除时会伴随动画效果。通过实例代码展示了 AnimatedListSample 类的实现，包括插入新项、删除选中项以及自定义动画效果的方法。

Flutter AnimatedList 列表以动画形式动态插入、删除

/// Flutter code sample for AnimatedList

// This sample application uses an [AnimatedList] to create an effect when
// items are removed or added to the list.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const AnimatedListSample());
}

class AnimatedListSample extends StatefulWidget {
  const AnimatedListSample({Key? key}) : super(key: key);

  @override
  State<AnimatedListSample> createState() => _AnimatedListSampleState();
}

class _AnimatedListSampleState extends State<AnimatedListSample> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  late ListModel<int> _list;
  int? _selectedItem;
  late int
      _nextItem; // The next item inserted when the user presses the '+' button.

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

  // Used to build list items that haven't been removed.
  Widget _buildItem(
      BuildContext context, int index, Animation<double> animation) {
    return CardItem(//下行可以自己定义动画
      animati