Flutter ListView 删除动画实现 - 使用 Dismissible 和 AnimatedList

首先，我们需要在 ListView 中添加一个删除按钮，并在点击后将该项从列表中删除。代码如下：

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  List<String> items = ['item1', 'item2', 'item3'];

  _removeItem(index) {
    setState(() {
      items.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Dismissible(
          key: Key(items[index]),
          onDismissed: (direction) {
            _removeItem(index);
          },
          child: ListTile(
            title: Text(items[index]),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                _removeItem(index);
              },
            ),
          ),
        );
      },
    );
  }
}

在上面的代码中，我们使用 Dismissible 组件来实现删除操作。Dismissible 是一个可滑动的组件，我们可以通过设置 onDismissed 回调函数来实现删除操作。在这个回调函数中，我们调用 _removeItem 方法来删除列表中的项。

接下来，我们可以为删除操作添加动画效果。我们可以使用 AnimatedList 组件来实现动画效果。AnimatedList 是一个已经封装好了动画效果的组件，我们只需要在删除操作时，将要删除的项从 AnimatedList 中删除即可。代码如下：

class _MyListViewState extends State<MyListView> {
  List<String> items = ['item1', 'item2', 'item3'];
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();

  _removeItem(index) {
    String removedItem = items[index];
    setState(() {
      items.removeAt(index);
      _listKey.currentState!.removeItem(
        index,
        (context, animation) => ListTile(
          title: Text(
            '${removedItem}',
            style: TextStyle(
              color: Colors.red,
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
          trailing: Icon(Icons.delete, color: Colors.red),
        ),
        duration: Duration(milliseconds: 500),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      key: _listKey,
      initialItemCount: items.length,
      itemBuilder: (context, index, animation) {
        return SlideTransition(
          position: Tween<Offset>(
            begin: Offset(1, 0),
            end: Offset.zero,
          ).animate(animation),
          child: ListTile(
            title: Text(items[index]),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                _removeItem(index);
              },
            ),
          ),
        );
      },
    );
  }
}

在上面的代码中，我们使用一个 GlobalKey 来获取 AnimatedListState，然后在删除操作时，调用 removeItem 方法将要删除的项从 AnimatedList 中删除，并指定动画效果的持续时间。

我们还使用了 SlideTransition 组件来实现删除项的滑动效果。SlideTransition 组件接收一个 animation 参数，我们可以在这个参数上使用 Tween 来指定动画的起始和结束位置。在这里，我们将起始位置设置为 (1, 0)，结束位置设置为 (0, 0)，从而实现从右侧滑入的效果。