Flutter如何实现确认框弹窗

在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如何实现确认框弹窗的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过showDialog函数和AlertDialog组件实现确认框弹窗。以下是实现步骤和示例代码：

步骤：

  1. 使用showDialog函数弹出对话框。
  2. 在builder中返回AlertDialog组件。
  3. 设置标题（title）、内容（content）和操作按钮（actions）。

示例代码：

// 触发弹窗的方法
void _showConfirmationDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text("确认操作"),
        content: Text("您确定要执行此操作吗？"),
        actions: <Widget>[
          TextButton(
            child: Text("取消"),
            onPressed: () {
              Navigator.of(context).pop(); // 关闭弹窗
            },
          ),
          TextButton(
            child: Text("确定"),
            onPressed: () {
              // 执行确认操作
              Navigator.of(context).pop(); // 关闭弹窗
            },
          ),
        ],
      );
    },
  );
}

使用方式： 在按钮的onPressed中调用_showConfirmationDialog方法：

ElevatedButton(
  onPressed: () => _showConfirmationDialog(context),
  child: Text("打开确认框"),
)

自定义选项：

  • 修改title和content的文本内容。
  • 在onPressed中添加业务逻辑。
  • 调整AlertDialog的样式（如shape、backgroundColor）。

这种方法适用于大多数确认场景，简单且易于扩展。

回到顶部