Flutter：在多个列表或列之间进行排序、拖放

Question

我一直在研究一些列表排序库，如

flutter_list_drag_and_drop

、

reorderable_list

、

flutter_reorderable_list

、

dragable_flutter_list

等，但它们都只适用于一个列表。

我想做的事情可以在下图中理解，这正是 Trello 应用程序所具有的。

任何图书馆建议或如何做到这一点？

Answer 1

我一直在研究一些列表排序库，如 flutter_list_drag_and_drop、reorderable_list、flutter_reorderable_list、dragable_flutter_list 等，但它们都只适用于一个列表。

对了！当前所有可用的库仅适用于一个列表。

我还有一个名为

orderable_stack

的插件，它基于“数据项”列表

更多详情请参考orderable_stack

您还可以参考this链接以获得更多可拖动的实现。

注意：目前

orderable_stack

与 Dart 2 不兼容

希望对你有帮助

Answer 2

我使用 boardview flutter 插件。

import 'package:boardview/board_item.dart';
import 'package:boardview/board_list.dart';
import 'package:boardview/boardview.dart';
@override
  Widget build(BuildContext context) {

List<BoardList> boardList = List<BoardList>();
List<BoardItem> boardItem = List<BoardItem>();
    boardItem.add(new BoardItem(
      boardList: BoardListState(),
      item: boarditem(),
      test: '1',
    ));

boardList.add(BoardList(
      index: 1,
      items: boardItem,
      header: header()
    ));

Widget header() {
    return Row( ... );}

Widget boarditem() {
    return Card( ... );}

 return BoardView(
      lists: boardList,
    );
}

Answer 3

只是为了完成这个老问题，对于像我这样的人在 2021 年搜索的情况，这里有一个包可以管理从一个列表到另一个列表的拖放项目，以及自己拖放这些列表。 pub.dev 的 Flutter 包

教程可以在这里找到：Johannes Milke 的教程

Answer 4

如果您仍然没有找到好的解决方案，可以使用 boardview flutter 插件。

它具有与 trellos 可拖动列表相同的功能。

（附：我是它的开发者，我在创建它时很懒，所以没有示例 gif）

Answer 5

如果您仍在探索，请查看kanban_board。 我是这个包的开发者，添加示例以清除实现。

import 'package:flutter/material.dart';
import 'package:kanban_board/custom/board.dart';
import 'package:kanban_board/models/inputs.dart';

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return KanbanBoard(
      List.generate(
        8,
        (index) => BoardListsData(
            items: List.generate(
          50,
          (index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
                "Lorem ipsum dolor sit amet, Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. $index",
                style: TextStyle(
                    fontSize: 19,
                    height: 1.3,
                    color: Colors.grey.shade800,
                    fontWeight: FontWeight.w500)),
          ),
        )),
      ),
      onItemLongPress: (cardIndex, listIndex) {},
      onItemReorder:
          (oldCardIndex, newCardIndex, oldListIndex, newListIndex) {},
      onListLongPress: (listIndex) {},
      onListReorder: (oldListIndex, newListIndex) {},
      onItemTap: (cardIndex, listIndex) {},
      onListTap: (listIndex) {},
      onListRename: (oldName, newName) {},
      backgroundColor: Colors.white,
      displacementY: 124,
      displacementX: 100,
      textStyle: TextStyle(
          fontSize: 19,
          height: 1.3,
          color: Colors.grey.shade800,
          fontWeight: FontWeight.w500),
    );
  }
}

看板中的演示：