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 {
  return 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

这是来自颤振回购的example。

在 1.12 版本的 Flutter 上测试。

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 回答了这里的颤振交互示例Example from Flutter's Docs: 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
            },
          ),
        ],
      );
    },
  );
}