Flutter，如何在Dismissible中使用confirmDismiss？

Question

是）我有的：

Dismissible(
    key: Key(state.threads[index].toString()),
    onDismissed: (direction) {
        setState(() {
            state.threads.removeAt(index);
        });
    },
);

工作正常。我可以通过向左滑动来消除项目。但是，我想确认该操作，我应该理解和阅读的内容是

confirmDismiss:

但是，作为一个初学者，由于缺乏示例，加上文档字面意义上我无法理解的任何内容。如何实现呢？

Answer 1

在该confirmDismiss属性中，您可以返回AlertDialog()（或您喜欢的任何类型的对话框），然后在按钮中列出可能的结果（例如，删除和取消），然后返回true（删除）或false（取消），然后确定该项目是否必须已删除或需要保留在列表中。

例：

confirmDismiss: (DismissDirection direction) async {
  final bool res = await showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text("Confirm"),
        content: const Text("Are you sure you wish to delete this item?"),
        actions: <Widget>[
          FlatButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: const Text("DELETE")
          ),
          FlatButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: const Text("CANCEL"),
          ),
        ],
      );
    },
  );
},

您可以将逻辑提取到方法中，以使代码更具可读性。

Answer 2

这是flutter 存储库中的一个示例。

在flutter 1.12版本上测试。

Future<bool> _showConfirmationDialog(BuildContext context, String action) {
  return showDialog<bool>(
    context: context,
    barrierDismissible: true,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Do you want to $action this item?'),
        actions: <Widget>[
          FlatButton(
            child: const Text('Yes'),
            onPressed: () {
              Navigator.pop(context, true); // showDialog() returns true
            },
          ),
          FlatButton(
            child: const Text('No'),
            onPressed: () {
              Navigator.pop(context, false); // showDialog() returns false
            },
          ),
        ],
      );
    },
  );
}

添加内部 Dismissible 小部件：

confirmDismiss: (DismissDirection dismissDirection) async {
  switch(dismissDirection) {
    case DismissDirection.endToStart:
      return await _showConfirmationDialog(context, 'archive') == true;
    case DismissDirection.startToEnd:
      return await _showConfirmationDialog(context, 'delete') == true;
    case DismissDirection.horizontal:
    case DismissDirection.vertical:
    case DismissDirection.up:
    case DismissDirection.down:
      assert(false);
  }
  return false;
}

Answer 3

我在一个项目中使用了以下代码，我可以在其中存档或删除通知。@Yurij Kots 的回答以及此处找到的 flutter 交互式示例来自 Flutter 文档的示例：CookBook

参见图片。如果您向右或向左拉动，它会显示该项目下方的底层图标...告诉您“可能会发生什么”！

观看代码工作：将下面的整个代码移至链接的交互式示例编码空间。

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

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

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

  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final items = List<String>.generate(20, (i) => "Item ${i + 1} A B C D E... X Y Z");

  String whatHappened;

  @override
  Widget build(BuildContext context) {
    final title = 'Notification Items List';

return MaterialApp(
  title: title,
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];

        return Dismissible(            
          key: Key(item),              
          onDismissed: (direction) {               
            setState(() {
              items.removeAt(index);
            });

            Scaffold.of(context)
                .showSnackBar(SnackBar(content: Text("$item was $whatHappened")));
          },






confirmDismiss: (DismissDirection dismissDirection) async {
  switch(dismissDirection) {
    case DismissDirection.endToStart:
      whatHappened = 'ARCHIVED';
      return await _showConfirmationDialog(context, 'Archive') == true;
    case DismissDirection.startToEnd:
      whatHappened = 'DELETED';
      return await _showConfirmationDialog(context, 'Delete') == true;
    case DismissDirection.horizontal:
    case DismissDirection.vertical:
    case DismissDirection.up:
    case DismissDirection.down:
      assert(false);
  }
  return false;
},



          background: Container(
            padding: EdgeInsets.symmetric(horizontal: 12.0),
            color: Colors.red,
            alignment: Alignment.centerLeft,
            child: Icon(Icons.cancel),
          ),
          secondaryBackground: Container(
            padding: EdgeInsets.symmetric(horizontal: 12.0),
            color: Colors.green,
            alignment: Alignment.centerRight,
            child: Icon(Icons.check),
          ),



          child: ListTile(title: Text('$item')),
        );
      },
    ),
  ),
);
  }
}

Future<bool> _showConfirmationDialog(BuildContext context, String action) {
  return showDialog<bool>(
    context: context,
    barrierDismissible: true,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Do you want to $action this item?'),
        actions: <Widget>[
          FlatButton(
            child: const Text('Yes'),
            onPressed: () {
              Navigator.pop(context, true); // showDialog() returns true
            },
          ),
          FlatButton(
            child: const Text('No'),
            onPressed: () {
              Navigator.pop(context, false); // showDialog() returns false
            },
          ),
        ],
      );
    },
  );
}