flutter - 如何在扩展图 block 内拖放？

Question

如何将列表拖放到另一个列表中？

我怎样才能做到这一点？

感谢您的帮助!

我已经尝试使用 drag_and_drop_lists 包，但我被卡在了 handle inside 和 outside item 中。

完整示例:

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

Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExpansionTileExample(),
    );
  }
}

class FolderData {
  String name;
  List<ListData> listData;
  FolderData({this.name, this.listData});
}

class ListData {
  String name;

  ListData({this.name});
}

class ExpansionTileExample extends StatefulWidget {
  ExpansionTileExample({Key key}) : super(key: key);

  @override
  _ListTileExample createState() => _ListTileExample();
}

class _ListTileExample extends State<ExpansionTileExample> {
  List<dynamic> _lists = [];

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

    _lists.add(FolderData(name: "Folder1", listData: []));


   _lists.add(FolderData(name: "Folder2", listData: []));

    _lists.add(ListData(
      name: "List1",
    ));


    _lists.add(ListData(
      name: "List2",
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expansion Tiles with drag and drop'),
      ),
      body: DragAndDropLists(
        children: List.generate(_lists.length, (index) => _buildList(index)),
        onItemReorder: _onItemReorder,
        onListReorder: _onListReorder,
        listGhost: Padding(
          padding: const EdgeInsets.symmetric(vertical: 30.0),
          child: Center(
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 100.0),
              decoration: BoxDecoration(
                border: Border.all(),
                borderRadius: BorderRadius.circular(7.0),
              ),
              child: Icon(Icons.add_box),
            ),
          ),
        ),
      ),
    );
  }

  _buildList(int outerIndex) {
    var innerList = _lists[outerIndex];
    return (innerList is FolderData)
        ? DragAndDropListExpansion(
            title: Text('List ${innerList.name}'),
            subtitle: Text('Subtitle ${innerList.name}'),
            leading: Icon(Icons.ac_unit),
            children: List.generate(innerList.listData.length, (index) => _buildItem(innerList.listData[index].name)),
            listKey: ObjectKey(innerList),
          )
        : DragAndDropList(
            children: <DragAndDropItem>[
              DragAndDropItem(
                child: ListTile(title: Text(innerList.name)),
              ),
            ],
          );
  }

  _buildItem(String item) {
    return DragAndDropItem(
      child: ListTile(
        title: Text(item),
      ),
    );
  }

// ======== Stuck here ========

  _onItemReorder(int oldItemIndex, int oldListIndex, int newItemIndex, int newListIndex) {
    setState(() {
      var movedDataOuter = _lists[oldListIndex];

      if (movedDataOuter is ListData) {
        //  1. drag  list inside folder.
        var movedItem = _lists.removeAt(oldListIndex);
        _lists[newListIndex].listData.insert(newItemIndex, movedItem);
      } else {
        // 2. remove list from folder.
        var movedItem = _lists[oldListIndex].listData.removeAt(oldItemIndex);
        _lists.insert(newListIndex, movedItem);

        // 3. drag & drop inner list inside folder
        //  var movedItem = _lists[oldListIndex].listData.removeAt(oldItemIndex);
        // _lists[oldListIndex].listData.insert(newItemIndex, movedItem);
      }

      // 4. drag and drop list outsie folder
      // var movedItem = _lists.removeAt(oldListIndex);
      // _lists.insert(newListIndex, movedItem);
    });
  }

  _onListReorder(int oldListIndex, int newListIndex) {
    setState(() {
      var movedList = _lists.removeAt(oldListIndex);
      if (movedList is FolderData) {
        _lists.insert(newListIndex, movedList);
      } else {
        _lists[newListIndex].listData.insert(newListIndex, movedList);
      }
    });
  }
}

Answer 1

您可以在 pub.dev 上使用以下包:drag_and_drop_lists

包裹:link

如果您需要教程，那么 link