Flutter 网格视图重新排序并拖放到另一个项目上并合并

Question

I have been trying to add drag/drop support to my app, currently what I have come with is using this library:

reorderable_grid_view

I used this example code: code link

The reason I used this library is that it's smooth enough of animations when dragging. But what I want to do is to drag one item to another so that I can merge the one to another object when I drop. (It's like in Android/iOS home screen where you can drag apps to folders or drag into another that it creates a folder)

I have searched all the site but couldn't come across with such thing, only drag/drop libraries are available. Can anyone help me on this?

Thanks in advance.

Answer 1

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});

  final ValueNotifier<List<ValueNotifier<List<Widget>>>> items = ValueNotifier([
    ValueNotifier([Text("A")]),
    ValueNotifier([Text("B")]),
    ValueNotifier([Text("C")]),
    ValueNotifier([Text("D")]),
  ]);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 20.0),
              child: ValueListenableBuilder(
                valueListenable: items,
                builder: (BuildContext context, List<ValueNotifier<List<Widget>>> folders, Widget? child) {
                  return GridView.builder(
                      physics: const NeverScrollableScrollPhysics(),
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
                      itemCount: folders.length,
                      itemBuilder: (context, index) {
                        ValueNotifier<List<Widget>> item = folders[index];
                        return LongPressDraggable(
                          delay: const Duration(milliseconds: 500),
                          feedback: SizedBox(width: MediaQuery.of(context).size.width / 4, height: MediaQuery.of(context).size.width / 4, child: FittedBox(child: Icon(Icons.folder))),
                          data: index,
                          childWhenDragging: const SizedBox(),
                          child: DragTarget(
                            onAccept: (data) {
                              List<Widget> alreadyHaved = item.value;
                              alreadyHaved.addAll(folders[data as int].value);
                              item.value = alreadyHaved;
                              items.value.removeAt(data);
                              items.notifyListeners();
                            },
                            builder: (context, candidateData, rejectedData) {
                              return ValueListenableBuilder(
                                valueListenable: item,
                                builder: (BuildContext context, List<Widget> boxValues, Widget? child) {
                                  return Stack(children: [
                                    const Positioned.fill(
                                        child: FittedBox(
                                            child: Icon(
                                      Icons.folder,
                                      color: Colors.amber,
                                    ))),
                                    Positioned.fill(
                                      child: LayoutBuilder(
                                          builder: (p0, p1) => SizedBox(
                                              height: p1.maxHeight * .7,
                                              width: p1.maxWidth * .7,
                                              child: Center(
                                                child: Wrap(
                                                  children: boxValues,
                                                ),
                                              ))),
                                    )
                                  ]);
                                },
                              );
                            },
                          ),
                        );
                      });
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}