如何将 Dismissible 与 ReorderableListView.builder 一起使用？

Question

我正在尝试将 ReorderableListView 与 Dissmissable 功能一起使用。数据以列表的形式从 API 中获取。 Dismissible 功能在下面的代码中不起作用。

注意：当我使用 Listview.builder 时，以下代码可以正常工作。

ReorderableListView.builder(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        onReorder: (int oldIndex, int newIndex) {
        if (oldIndex != newIndex) {
           //reorder action 
        },
        itemCount: list.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return Dismissible(
            direction: DismissDirection.up,
            onDismissed: (direction) {},
            key: UniqueKey(),
            child: ReorderableDragStartListener(
              key: UniqueKey(),
              index: index,
              child: SizedOverflowBox(
                alignment: Alignment.bottomLeft,
                size: const Size(50, 10),
                child: Image(
                  image: AssetImage("assets/${list[index]}.png"),
                ),
              ),
            ),
          );
        },
      ),

Answer 1

这里的错误最初是您无法滑动关闭，因为 ReorderableDragStartListener 不允许关闭关闭它。

最好的解决方案是有一种机制在重新排序和关闭之间切换。

这是我想出的一种解决方案：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<String> list = ["1", "2", "3"];

  bool reorder;

  @override
  void initState() {
    super.initState();
    reorder = false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton.extended(
          label: reorder ? const Text("Done") : const Text("Reorder"),
          onPressed: () {
            setState(() {
              reorder = !reorder;
            });
          }),
      body: reorder
          ? ReorderableListView.builder(
              key: UniqueKey(),
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              onReorder: (int oldIndex, int newIndex) {
                if (newIndex >= list.length) return;
                print(oldIndex);
                print(newIndex);
                setState(() {
                  var tmp = list[oldIndex];
                  list[oldIndex] = list[newIndex];
                  list[newIndex] = tmp;
                  print(list);
                });
              },
              itemCount: list.length,
              itemBuilder: (context, index) {
                return ReorderableDragStartListener(
                  index: index,
                  key: ValueKey(index),
                  child: ListTile(title: Text("${list[index]}")),
                );
              },
            )
          : ListView.builder(
              itemCount: list.length,
              itemBuilder: (c, i) {
                return Dismissible(
                  key: UniqueKey(),
                  background: Container(color: Colors.red),
                  onDismissed: (direction) {
                    setState(() {
                      list.removeAt(i);
                    });
                  },
                  child: ListTile(title: Text("${list[i]}")),
                );
              }),
    );
  }
}

这里，我们只是使用reorder变量来切换模式