Flutter动画重排序列表插件animated_reorderable_list_view的使用

这个库是一个易于使用的解决方案，用于在Flutter中实现带有拖放功能的动画列表。

特性

• ✅ 在列表项插入和移除时，平滑过渡并带有动画效果。
• ✅ 支持拖放（可重新排序）功能，并带有动画效果。
• ✅ 该类是标准 ReorderableListView 的扩展，可以利用其所有功能。ReorderableListView 类
• ✅ 可以同时进行动画和重新排序。
• ✅ 更新列表即可轻松实现动画。
• ✅ 可自定义动画。
• ✅ 支持重新排序、插入、移除、移动、交换、多移除等操作。

安装

flutter pub add animated_reorderable_list_view
flutter pub get

使用

以下是一个完整的示例代码，展示了如何使用 animated_reorderable_list_view 插件来创建一个具有动画效果的可重新排序列表。

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

class AnimatedReorderableListViewExampleState
    extends State<AnimatedReorderableListViewExample>
    with SingleTickerProviderStateMixin {
  // 初始化列表数据
  final List<String> _items = List.generate(10, (index) => 'Item ${index + 1}');

  // 动画控制器
  late final AnimationController animationController;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 设置动画持续时间为500毫秒
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
  }

  [@override](/user/override)
  void dispose() {
    // 释放动画控制器资源
    animationController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建可重新排序的列表视图
    var animatedReorderableListView = AnimatedReorderableListView(
      state: this,
      items: _items, // 列表数据
      animationController: animationController, // 动画控制器
      onReorder: (oldIndex, newIndex) {
        // 当列表项重新排序时触发
        setState(() {
          // 插入新位置，并从旧位置移除
          _items.insert(oldIndex < newIndex ? newIndex - 1 : newIndex,
              _items.removeAt(oldIndex));
        });
      },
      children: [
        // 构建每个列表项
        for (int i = 0; i < _items.length; ++i)
          ListTile(
            key: GlobalKey(), // 必须为每个列表项设置唯一key
            title: Text(_items[i]), // 显示的文本
            trailing: ReorderableDragStartListener( // 拖动图标
              index: i,
              child: const Icon(Icons.drag_handle),
            ),
          )
      ],
    );

    return Scaffold(
      appBar: AppBar(
        actions: [
          // 添加按钮
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: () {
              // 在第一个位置插入新项目
              animatedReorderableListView.insert(0, 'New Item');
            },
          ),
          // 删除按钮
          IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () {
              // 移除第一个项目
              animatedReorderableListView.removeAt(0);
            },
          ),
        ],
      ),
      body: animatedReorderableListView, // 显示可重新排序的列表视图
    );
  }
}