drag_and_drop_lists

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，支持在两级嵌套列表中进行拖放重新排序。它支持直观的用户交互，用于在多个层级间重新排列项目，非常适合组织分层数据。该包与所有主要平台兼容，包括 Android、iOS、Web、macOS、Windows 和 Linux。设计简洁且性能出色，可无缝集成到现有的 Flutter 应用中，无需复杂的设置。开发者可以使用极少的代码轻松实现交互式列表结构。源代码公开托管在 GitHub 上，以确保透明度并支持贡献。

适合场景

重新排序嵌套任务列表
构建可自定义的仪表板
创建可排序的类别-子类别结构
设计交互式待办事项应用程序
实现拖放文件或项目组织

主要特点

支持两级列表
跨层级拖放
平台无关的实现
所需的样板代码最少
内置动画处理
公共 GitHub 仓库

适合对象

开发分层用户界面的开发者
需要动态列表重新排序的应用程序
具有嵌套数据结构的项目
UI密集型生产力工具
希望获得开源且可维护解决方案的团队

使用建议

限制为两级嵌套
可能需要自定义样式以适应复杂布局
性能可能在非常大的列表中下降
未针对超出基本拖拽之外的触摸手势进行优化
无内置的拖放目标验证

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Two-level drag and drop reorderable lists.

Features

Reorder elements between multiple lists
Reorder lists
Drag and drop new elements from outside of the lists
Vertical or horizontal layout
Use with drag handles, long presses, or short presses
Expandable lists
Can be used in slivers
Prevent individual lists/elements from being able to be dragged
Easy to extend with custom layouts

Usage

To use this plugin, add drag_and_drop_lists as a dependency in your pubspec.yaml file. For example:

dependencies:
  drag_and_drop_lists: ^0.4.0

Now in your Dart code, you can use: import 'package:drag_and_drop_lists/drag_and_drop_lists.dart';

To add the lists, add a DragAndDropLists widget. Set its children to a list of DragAndDropList. Likewise, set the children of DragAndDropList to a list of DragAndDropItem. For example:

  // Outer list
  List<DragAndDropList> _contents;

  @override
  void initState() {
    super.initState();

    // Generate a list
    _contents = List.generate(10, (index) {
      return DragAndDropList(
        header: Text('Header $index'),
        children: <DragAndDropItem>[
          DragAndDropItem(
            child: Text('$index.1'),
          ),
          DragAndDropItem(
            child: Text('$index.2'),
          ),
          DragAndDropItem(
            child: Text('$index.3'),
          ),
        ],
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    // Add a DragAndDropLists. The only required parameters are children,
    // onItemReorder, and onListReorder. All other parameters are used for
    // styling the lists and changing its behaviour. See the samples in the
    // example app for many more ways to configure this.
    return DragAndDropLists(
      children: _contents,
      onItemReorder: _onItemReorder,
      onListReorder: _onListReorder,
    );
  }

  _onItemReorder(int oldItemIndex, int oldListIndex, int newItemIndex, int newListIndex) {
    setState(() {
      var movedItem = _contents[oldListIndex].children.removeAt(oldItemIndex);
      _contents[newListIndex].children.insert(newItemIndex, movedItem);
    });
  }

  _onListReorder(int oldListIndex, int newListIndex) {
    setState(() {
      var movedList = _contents.removeAt(oldListIndex);
      _contents.insert(newListIndex, movedList);
    });
  }

For further examples, see the example app or view the example code directly.

搜索插件、代码仓与 APP 分类