Flutter中如何实现对Dismissible widget的删除和撤消操作？答案

【问题标题】：How to achieve delete and undo operations on Dismissible widget in Flutter?Flutter中如何实现对Dismissible widget的删除和撤消操作？
【发布时间】：2020-09-30 10:06:29
【问题描述】：

问题：

1-) 我有一个来自 sqlite 数据库的数据列表，我想在 UI 中显示它们。此外，当用户关闭一张卡片时，我想将其从数据库中删除，但如果用户点击撤消，那么我想将其取回。问题是当我关闭它给出错误的卡时：

已关闭的 Dismissible 小部件仍然是树的一部分。

我搜索了这个问题的解决方案，但没有一个适合我的情况，因为我使用 Bloc 进行这些操作，而其他解决方案是关于 setState

你可以在这里看到： GIF

2-) 还有当我刷卡卡的背景色剪裁时： Photo

如何解决这些问题？

return Dismissible(
  key: Key(widget.task.id.toString()),
  background: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.red,
    ),
  ),
  onDismissed: (direction) async {
    Task copied = widget.task;
    taskBloc.deleteTask(widget.task.id);
    changeValue(widget.task.categoryId, false);
    Flushbar(
      messageText: Text('Task deleted', style: bodyText.copyWith(
        color: Colors.white
      )),
      duration: Duration(seconds: 10),
      margin: EdgeInsets.all(8),
      borderRadius: 8,
      icon: Icon(FontAwesomeIcons.infoCircle, color: widget.color),
      flushbarStyle: FlushbarStyle.FLOATING,
      dismissDirection: FlushbarDismissDirection.HORIZONTAL,
      mainButton: FlatButton(
        onPressed: () async {
          taskBloc.addTask(copied);
          changeValue(widget.task.categoryId, true);
        },
        child: Text('Undo', style: bodyText.copyWith(color: widget.color)),
      ),
    )..show(context);
  }),

【问题讨论】：

标签： flutter

【解决方案1】：

您可以在 Dismissible 小部件中实现此传递的 confirmDismiss，如下所示，该小部件应返回 true 否则为 false；

 confirmDismiss: (val) async {    
 return await  AlertDialog(
      title: Text('Delete'),
      content: Text('Are you sure to delete?'),
      actions:[
        FlatButton(
          child:Text("Yes"),
          onPressed:()=>Navigator.pop(context,true)
        ),
         FlatButton(
          child:Text("No"),
          onPressed:()=>Navigator.pop(context,false)
        ),
      ],
    )??false;    
 }

之后，只有在单击 Yes 按钮时才会调用 onDismissed 。在调用被解雇后从当前列表中删除项目

【讨论】：

感谢@Khadga 的回复，但我不想显示对话框，我只想显示Flushbar（一种小吃店），如果用户点击撤消按钮，我必须将其恢复，否则必须删除
另外，由于我使用 StreamBuilder 删除，我认为没有必要从列表中删除项目，因为当任何更改（例如删除项目或添加项目）时 StreamBuilder 已经刷新自己
@WildHunter 你是怎么做到的。你能和我们分享一下吗？我也面临同样的问题。当用户单击撤消按下时，我使用 SnackBar 并重新插入。

【解决方案2】：

void _onDismissed(BuildContext context, index) => setState(
    () {
      FavouriteSong favouriteSong = favouriteSongs[index];
      favouriteSongs.removeAt(index);
      BlocProvider.of<FavouriteSongBloc>(context)
          .add(DeleteFavouriteSong(favouriteSong: favouriteSong));

      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content:
              AutoSizeText("${favouriteSong.title} ကိုဖျက်လိုက်ပါပြီ။"),
          duration: const Duration(seconds: 3),
          action: SnackBarAction(
            label: 'မဖျက်တော့ပါ',
            onPressed: () {
              favouriteSongs.insert(index, favouriteSong);

              BlocProvider.of<FavouriteSongBloc>(context).add(
                CreateFavouriteSong(favouriteSong: favouriteSong),
              );
            },
          ),
        ),
      );
    },
  );

【讨论】：