Flutter多列表拖拽排序插件draggable_multi_listview的使用

draggable_multi_listview

draggable_multi_listview 是一个高度可定制的Flutter包，允许开发者创建多个可拖拽和放置的列表，并支持动态UI自定义。该包支持的功能包括拖放功能、动画过渡以及UI装饰，以实现精美的外观。

功能特性

• 创建带有标题和项目的多个列表。
• 支持在列表之间通过平滑动画进行项目拖放。
• 自定义间距、标题对齐方式和UI装饰。
• 提供回调函数，用于处理项目移动后列表的更新。
• 灵活且响应式的布局设计。

示例演示

装饰后的UI

未装饰的UI

安装步骤

1. 在您的 pubspec.yaml 文件中添加依赖：

   dependencies:
     draggable_multi_listview: ^1.0.7
   

2. 执行命令以获取依赖项：

   flutter pub get
   

3. 在Dart文件中导入包：

   import 'package:draggable_multi_listview/draggable_multi_listview.dart';
   

使用示例

下面是一个完整的示例代码，展示了如何在应用中使用 draggable_multi_listview 小部件：

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

void main() {
  runApp(DraggableMultiListViewExample());
}

/// A StatelessWidget representing the entire example UI for a
/// draggable_multi_listview task manager with three categories: To-Do, In Progress, Completed.
class DraggableMultiListViewExample extends StatelessWidget {
  DraggableMultiListViewExample({super.key});

  /// List of tasks in the "In Progress" state.
  final List<Map> inProgress = [
    {
      "title": "Write unit tests",
      "description": "Add test coverage for the user authentication module",
      "dueDate": "2024-12-04",
    },
    {
      "title": "Update documentation",
      "description": "Revise API documentation for the latest endpoints",
      "dueDate": "2024-12-07",
    },
  ];

  /// List of tasks in the "Completed" state.
  final List<Map> completed = [
    {
      "title": "Fix login bug",
      "description": "Resolved issue where login failed for new users",
      "dueDate": "2024-12-01",
    },
    {
      "title": "Team meeting",
      "description": "Discussed project progress and assigned new tasks",
      "dueDate": "2024-12-02",
    },
  ];

  /// List of tasks in the "To-Do" state.
  final List<Map> toDo = [
    {
      "title": "Complete Flutter project",
      "description": "Work on the main page layout and implement navigation",
      "dueDate": "2024-12-05",
    },
    {
      "title": "Review PRs",
      "description": "Go through pending pull requests and leave comments",
      "dueDate": "2024-12-06",
    },
    {
      "title": "Prepare presentation",
      "description": "Create slides for the upcoming sprint demo",
      "dueDate": "2024-12-08",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Drag and Drop Example',
      theme: ThemeData.light().copyWith(
        scaffoldBackgroundColor: const Color(0xFFF3F8FB),
        appBarTheme: const AppBarTheme(
          backgroundColor: Color(0xFF004D40),
          titleTextStyle: TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Task Manager'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(10),
          child: MultiDragAndDrop(
            uiDecorated: false,
            disableTitle: false,
            titleTextStyle: const TextStyle(
              color: Colors.black,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
            verticalSpacing: 5,
            titleAlignment: TitleAlignment.center,
            items: [
              ListData(
                title: 'To-Do',
                items: toDo,
              ),
              ListData(
                title: 'In Progress',
                items: inProgress,
              ),
              ListData(
                title: 'Completed',
                items: completed,
              ),
            ],
            horizontalSpacingRatio: 0.02,
            itemBuilder: (item) => Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.4),
                    blurRadius: 6,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item['title'].toString(),
                      style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF004D40),
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text(
                      item['description'].toString(),
                      style: const TextStyle(
                        fontSize: 14,
                        color: Colors.black87,
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text(
                      "Due: ${item['dueDate']}",
                      style: const TextStyle(
                        fontSize: 12,
                        fontStyle: FontStyle.italic,
                        color: Color(0xFFBF360C),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            onListsChanged: (updatedLists, sourceIndex, targetIndex, movedItem) {},
          ),
        ),
      ),
    );
  }
}

使用指南

断言规则

• horizontalSpacingRatio 必须在范围 0.01 和 0.09 之间。
• 初始项目列表不能为空。
• 如果启用了 uiDecorated：
  • 必须提供 paddingForDecoratedUi, titleTextStyle, 和 decorationForDecoratedUi。
• 如果禁用了 uiDecorated：
  • 不应提供 paddingForDecoratedUi 和 decorationForDecoratedUi。

通过遵循这些指南，您可以确保 draggable_multi_listview 插件在您的应用程序中正确运行并提供良好的用户体验。