Flutter可拖动排序列表插件animated_reorderable_list的使用

animated_reorderable_list

animated_reorderable_list 是一个功能强大且易于使用的Flutter库，它实现了带有拖放功能的动画列表和网格。

功能特性

• ✅ 在项目插入和移除时提供平滑过渡动画。
• ✅ 支持ListView和GridView的拖拽排序，并带有动画效果。
• ✅ 可同时进行动画和重新排序。
• ✅ 通过更新列表即可实现项目的动画效果。
• ✅ 提供了多种内置动画（如淡入、缩放、滑动、翻转等）。
• ✅ 支持列表和网格布局。
• ✅ 支持大列表，按需创建视口中的项。
• ✅ 启用/禁用拖拽功能。
• ✅ 控制项目重新排序或锁定项目。

示例代码

添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  animated_reorderable_list: ^latest_version

安装包：

flutter pub get

导入库

import 'package:animated_reorderable_list/animated_reorderable_list.dart';

使用示例

AnimatedReorderableListView

AnimatedReorderableListView(
  items: list,
  itemBuilder: (BuildContext context, int index) {
    final user = list[index];
    return ItemTile(
      key: ValueKey(user.id),
      id: user.id,
    );
  },
  enterTransition: [SlideInDown()],
  exitTransition: [SlideInUp()],
  insertDuration: const Duration(milliseconds: 300),
  removeDuration: const Duration(milliseconds: 300),
  dragStartDelay: const Duration(milliseconds: 300),
  onReorder: (int oldIndex, int newIndex) {
    setState(() {
      final User user = list.removeAt(oldIndex);
      list.insert(newIndex, user);
    });
  },
  isSameItem: (a, b) => a.id == b.id
)

AnimatedReorderableGridView

AnimatedReorderableGridView(
  items: list,
  itemBuilder: (BuildContext context, int index) {
    final user = list[index];
    return ItemCard(
      key: ValueKey(user.id),
      id: user.id,
    );
  },
  sliverGridDelegate: SliverReorderableGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4),
  enterTransition: [FlipInX(), ScaleIn()],
  exitTransition: [SlideInLeft()],
  insertDuration: const Duration(milliseconds: 300),
  removeDuration: const Duration(milliseconds: 300),
  onReorder: (int oldIndex, int newIndex) {
    setState(() {
      final User user = list.removeAt(oldIndex);
      list.insert(newIndex, user);
    });
  },
  dragStartDelay: const Duration(milliseconds: 300),
  isSameItem: (a, b) => a.id == b.id,
)

完整示例Demo

下面是一个完整的示例，展示了如何使用animated_reorderable_list来创建一个可以拖拽排序的列表：

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

void main() {
  runApp(const MaterialApp(title: 'Animated Reorderable List', home: HomePage()));
}

class User {
  final String name;
  final int id;

  User({required this.name, required this.id});
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<User> list = [];

  @override
  void initState() {
    super.initState();
    list = List.generate(8, (index) => User(name: "User $index", id: index));
  }

  void insert() {
    setState(() {
      list.insert(1, User(name: "User ${list.length}", id: list.length));
    });
  }

  void remove() {
    setState(() {
      if (list.isNotEmpty && list.length > 1) list.removeAt(1);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animated Reorderable List'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(onPressed: insert, child: const Text('Insert')),
                ElevatedButton(onPressed: remove, child: const Text('Remove')),
              ],
            ),
            Expanded(
              child: AnimatedReorderableListView(
                items: list,
                itemBuilder: (BuildContext context, int index) {
                  final user = list[index];
                  return ListTile(
                    key: ValueKey(user.id),
                    title: Text(user.name),
                  );
                },
                enterTransition: [SlideInDown()],
                exitTransition: [SlideInUp()],
                insertDuration: const Duration(milliseconds: 300),
                removeDuration: const Duration(milliseconds: 300),
                dragStartDelay: const Duration(milliseconds: 300),
                onReorder: (int oldIndex, int newIndex) {
                  setState(() {
                    final User user = list.removeAt(oldIndex);
                    list.insert(newIndex, user);
                  });
                },
                isSameItem: (a, b) => a.id == b.id,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何使用AnimatedReorderableListView创建一个简单的用户列表，并允许用户通过拖拽来重新排序列表项。此外，还提供了插入和删除列表项的功能。

希望这些信息能帮助你更好地理解和使用animated_reorderable_list插件！如果你有任何问题或需要进一步的帮助，请随时提问。