快速使用 Flutter 的 Dialog 和 AlertDialog

在 Flutter 中，Dialog 和 AlertDialog 组件用于显示弹出窗口，适用于提示用户、确认操作或展示信息。AlertDialog 主要用于带标题、内容和按钮的弹窗，而 Dialog 可用于自定义内容窗口。本文将详细介绍 Dialog 和 AlertDialog 的用法及自定义技巧。

帅次.

2519人浏览 · 2025-06-09 09:00:00

帅次. · 2025-06-09 09:00:00 发布

四、Cupertino 风格的 Dialog

五、不同类型的对话框

5.1 简单对话框 (SimpleDialog)

5.2 带输入框的对话框

六、结论

一、引言

在 Flutter 中，Dialog 和 AlertDialog 组件用于显示弹出窗口，适用于提示用户、确认操作或展示信息。AlertDialog 主要用于带标题、内容和按钮的弹窗，而 Dialog 可用于自定义内容窗口。本文将详细介绍 Dialog 和 AlertDialog 的用法及自定义技巧。

二、AlertDialog 的基本用法

AlertDialog 由 title（标题）、content（内容）和 actions（操作按钮）组成。

import 'package:flutter/material.dart';

class ScDialogPage extends StatefulWidget {
  const ScDialogPage({super.key});

  @override
  State<ScDialogPage> createState() => _ScDialogPageState();
}

class _ScDialogPageState extends State<ScDialogPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dialog 示例')),
      body: Center(
        child: Column(
          //垂直布局
          children: [
            ElevatedButton(
              onPressed: () => _showExitDialog(context), // 点击按钮触发对话框
              child: const Text('打开对话框'),
            ),


          ],
        ),
      ),
    );
  }
  // 显示对话框的方法
  void _showExitDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('提示'),
          content: Text('你确定要退出吗？'),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('取消'),
            ),
            TextButton(
              onPressed: () {
                // 执行操作
                Navigator.of(context).pop();
              },
              child: Text('确认'),
            ),
          ],
        );
      },
    );

  }
}

禁用点击外部关闭弹窗

默认情况下，点击弹窗外部可以关闭 AlertDialog，如果不希望用户随意关闭，可以设置 barrierDismissible: false。

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) {
    return AlertDialog(
      title: Text('重要提示'),
      content: Text('请阅读并确认操作。'),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text('确定'),
        ),
      ],
    );
  },
);

三、自定义 Dialog

Dialog 允许创建更灵活的自定义弹窗，例如带有图片、表单或复杂布局的对话框。

showDialog(
  context: context,
  builder: (context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('自定义弹窗', style: TextStyle(fontSize: 18)),
            SizedBox(height: 10),
            Text('这是一个自定义的对话框示例。'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('关闭'),
            ),
          ],
        ),
      ),
    );
  },
);

四、Cupertino 风格的 Dialog

如果要在 iOS 设备上提供原生体验，可以使用 CupertinoAlertDialog。

showDialog(
  context: context,
  builder: (context) {
    return CupertinoAlertDialog(
      title: Text('提示'),
      content: Text('这是 iOS 风格的弹窗。'),
      actions: [
        CupertinoDialogAction(
          child: Text('取消'),
          onPressed: () => Navigator.of(context).pop(),
        ),
        CupertinoDialogAction(
          child: Text('确定'),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ],
    );
  },
);

五、不同类型的对话框

5.1 简单对话框 (SimpleDialog)

showDialog(
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      title: Text('选择选项'),
      children: <Widget>[
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, '选项1');
          },
          child: Text('选项1'),
        ),
        SimpleDialogOption(
          onPressed: () {
            Navigator.pop(context, '选项2');
          },
          child: Text('选项2'),
        ),
      ],
    );
  },
).then((value) {
  print('选择了: $value');
});

5.2 带输入框的对话框

final TextEditingController _controller = TextEditingController();

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('输入'),
      content: TextField(
        controller: _controller,
        decoration: InputDecoration(hintText: "请输入内容"),
      ),
      actions: <Widget>[
        TextButton(
          child: Text('取消'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: Text('确定'),
          onPressed: () {
            print('输入的内容: ${_controller.text}');
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);