flutter如何实现comfirm对话框

在Flutter中，如何实现一个带有确认和取消按钮的对话框？我想在用户执行某些操作时弹出提示，比如删除数据前需要二次确认。最好能自定义对话框的标题、内容和按钮文字，并且能根据用户点击的按钮（确认或取消）执行不同的回调逻辑。有没有简单通用的实现方式？

2 回复

Flutter 中可使用 showDialog 配合 AlertDialog 实现确认对话框。示例代码：

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('确认'),
    content: Text('确定执行此操作？'),
    actions: [
      TextButton(onPressed: () => Navigator.pop(context), child: Text('取消')),
      TextButton(onPressed: () {
        // 确认操作
        Navigator.pop(context);
      }, child: Text('确定')),
    ],
  ),
);

更多关于flutter如何实现comfirm对话框的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过 showDialog 和 AlertDialog 实现确认对话框。以下是具体实现：

1. 基本实现代码

Future<bool?> showConfirmDialog(BuildContext context) async {
  return showDialog<bool>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('确认操作'),
        content: const Text('您确定要执行此操作吗？'),
        actions: <Widget>[
          TextButton(
            child: const Text('取消'),
            onPressed: () => Navigator.of(context).pop(false),
          ),
          TextButton(
            child: const Text('确定'),
            onPressed: () => Navigator.of(context).pop(true),
          ),
        ],
      );
    },
  );
}

// 调用示例
bool? result = await showConfirmDialog(context);
if (result == true) {
  // 用户点击了确定
  print("用户确认操作");
}

2. 自定义样式（可选）

AlertDialog(
  shape: RoundedRectangleBorder( // 圆角
    borderRadius: BorderRadius.circular(16),
  ),
  title: Text('确认删除', style: TextStyle(color: Colors.red)),
  content: Text('此操作不可撤销'),
  actions: [
    OutlinedButton( // 取消按钮样式
      child: Text('取消'),
      onPressed: () => Navigator.pop(context, false),
    ),
    ElevatedButton( // 确认按钮样式
      child: Text('删除'),
      onPressed: () => Navigator.pop(context, true),
    ),
  ],
)

关键点说明：

  1. 使用 showDialog 创建对话框
  2. AlertDialog 的 actions 定义按钮
  3. 通过 Navigator.pop 返回结果（true/false）
  4. 使用 async/await 等待用户选择

完整调用流程：

onPressed: () async {
  bool? isConfirmed = await showConfirmDialog(context);
  if (isConfirmed ?? false) {
    // 执行确认操作
  }
}

这是最标准的实现方式，简单直观且易于扩展样式。

回到顶部