欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

🎯 欢迎来到 Flutter for OpenHarmony 社区！本文将深入讲解 Flutter 中 AlertDialog 对话框组件的使用方法，带你从基础到精通，掌握这一重要的用户交互组件。

---

一、AlertDialog 组件概述

在 Flutter for OpenHarmony 应用开发中，AlertDialog（对话框）是一种用于显示重要信息、获取用户确认或收集用户输入的模态窗口。对话框会覆盖当前界面，要求用户进行响应后才能继续操作，是应用中不可或缺的交互组件。

📋 AlertDialog 组件特点

特点	说明
模态交互	阻塞用户对底层界面的操作，强制用户响应
灵活布局	支持自定义标题、内容和操作按钮
Material Design	遵循 Material Design 规范的视觉样式
动画效果	自带平滑的弹出和关闭动画
可定制性	支持自定义形状、颜色、内容等

💡 使用场景：AlertDialog 常用于删除确认、退出登录、错误提示、版本更新、授权请求等需要用户明确响应的场景。

---

二、AlertDialog 基础用法

学习 AlertDialog，我们首先需要了解如何显示一个对话框。与普通组件不同，AlertDialog 通常通过 showDialog 函数来显示。

2.1 最简单的 AlertDialog

最基础的 AlertDialog 包含标题、内容和操作按钮。

ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('提示'),
          content: const Text('这是一个简单的对话框'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('确定'),
            ),
          ],
        );
      },
    );
  },
  child: const Text('显示对话框'),
)

代码解析：

• showDialog：显示对话框的函数，需要传入 context 和 builder
• builder：构建对话框内容的回调函数，返回 AlertDialog 组件
• title：对话框的标题
• content：对话框的主要内容
• actions：对话框底部的操作按钮列表
• Navigator.of(context).pop()：关闭对话框

⚠️ 注意：对话框显示后，必须通过 Navigator.pop() 来关闭，否则用户无法退出对话框。

2.2 完整示例

下面是一个完整的可运行示例，展示了 AlertDialog 的基本使用：

class AlertDialogExample extends StatelessWidget {
  const AlertDialogExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AlertDialog 示例')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: const Text('欢迎'),
                  content: const Text('欢迎使用 Flutter for OpenHarmony！'),
                  actions: [
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: const Text('关闭'),
                    ),
                  ],
                );
              },
            );
          },
          child: const Text('显示对话框'),
        ),
      ),
    );
  }
}

---

三、AlertDialog 常用属性

掌握了基础用法后，我们来深入了解 AlertDialog 的各种属性，这些属性可以帮助我们创建更丰富的对话框样式。

3.1 title - 标题

设置对话框的标题，通常是一个 Text 组件，也可以是其他 Widget。

AlertDialog(
  title: const Text('确认删除'),
  content: const Text('删除后数据将无法恢复'),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('取消'),
    ),
    TextButton(
      onPressed: () {
        // 执行删除操作
        Navigator.pop(context);
      },
      child: const Text('删除'),
    ),
  ],
)

设计建议：

• 标题应简洁明了，概括对话框的主题
• 避免标题过长，一般不超过一行
• 可以使用 Icon + Text 组合增强视觉效果

3.2 content - 内容

设置对话框的主要内容，可以是文本、列表、表单等任意 Widget。

AlertDialog(
  title: const Text('选择语言'),
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      ListTile(
        title: const Text('简体中文'),
        onTap: () => Navigator.pop(context, 'zh'),
      ),
      ListTile(
        title: const Text('English'),
        onTap: () => Navigator.pop(context, 'en'),
      ),
      ListTile(
        title: const Text('日本語'),
        onTap: () => Navigator.pop(context, 'ja'),
      ),
    ],
  ),
)

内容设计技巧：

• 使用 mainAxisSize: MainAxisSize.min 让内容自适应高度
• 内容较多时，可以包裹在 SingleChildScrollView 中
• 可以嵌入表单、图片等复杂内容

3.3 actions - 操作按钮

设置对话框底部的操作按钮，是一个 Widget 列表。

AlertDialog(
  title: const Text('保存更改'),
  content: const Text('是否保存当前更改？'),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context, false),
      child: const Text('不保存'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, true),
      child: const Text('保存'),
    ),
  ],
)

按钮设计原则：

• 将主要操作放在最右边
• 危险操作（如删除）使用警示颜色
• 按钮文字应简洁明确

3.4 backgroundColor - 背景颜色

设置对话框的背景颜色。

AlertDialog(
  title: const Text('深色对话框'),
  content: const Text('这是一个深色背景的对话框'),
  backgroundColor: Colors.grey[800],
  titleTextStyle: const TextStyle(
    color: Colors.white,
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
  contentTextStyle: const TextStyle(color: Colors.white70),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('关闭'),
    ),
  ],
)

3.5 shape - 形状

设置对话框的形状，常用于设置圆角。

AlertDialog(
  title: const Text('圆角对话框'),
  content: const Text('这是一个带圆角的对话框'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('确定'),
    ),
  ],
)

3.6 elevation - 阴影高度

设置对话框的阴影高度，影响对话框的立体感。

AlertDialog(
  title: const Text('高阴影对话框'),
  content: const Text('这个对话框有更高的阴影'),
  elevation: 24,
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('关闭'),
    ),
  ],
)

3.7 titlePadding 和 contentPadding - 内边距

设置标题和内容的内边距。

AlertDialog(
  title: const Text('自定义内边距'),
  titlePadding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
  content: const Text('内容区域的内边距也可以自定义'),
  contentPadding: const EdgeInsets.fromLTRB(24, 16, 24, 0),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('确定'),
    ),
  ],
)

3.8 actionsPadding 和 actionsAlignment - 按钮区域

设置操作按钮区域的内边距和对齐方式。

AlertDialog(
  title: const Text('按钮对齐'),
  content: const Text('操作按钮可以设置不同的对齐方式'),
  actionsPadding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
  actionsAlignment: MainAxisAlignment.spaceEvenly,
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('取消'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('确定'),
    ),
  ],
)

📊 AlertDialog 属性速查表

属性	类型	默认值	说明
title	Widget?	-	对话框标题
content	Widget?	-	对话框内容
actions	List?	-	操作按钮列表
backgroundColor	Color?	-	背景颜色
shape	ShapeBorder?	-	形状
elevation	double?	-	阴影高度
titlePadding	EdgeInsetsGeometry?	-	标题内边距
contentPadding	EdgeInsetsGeometry?	-	内容内边距
actionsPadding	EdgeInsetsGeometry?	-	按钮区域内边距
actionsAlignment	MainAxisAlignment?	-	按钮对齐方式
titleTextStyle	TextStyle?	-	标题文字样式
contentTextStyle	TextStyle?	-	内容文字样式

---

四、showDialog 函数详解

showDialog 是显示对话框的核心函数，理解它的参数对于灵活使用对话框非常重要。

4.1 基本参数

showDialog(
  context: context,
  barrierDismissible: false,
  barrierColor: Colors.black54,
  builder: (BuildContext context) {
    return AlertDialog(
      title: const Text('提示'),
      content: const Text('对话框内容'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('确定'),
        ),
      ],
    );
  },
)

参数说明：

参数	类型	默认值	说明
context	BuildContext	-	上下文（必填）
builder	WidgetBuilder	-	对话框构建器（必填）
barrierDismissible	bool	true	点击遮罩是否关闭
barrierColor	Color?	Colors.black54	遮罩颜色
useSafeArea	bool	true	是否使用安全区域
useRootNavigator	bool	true	是否使用根导航器

4.2 获取对话框返回值

对话框可以通过 Navigator.pop() 返回结果，调用方通过 await 获取返回值。

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

  if (result == true) {
    // 用户点击了确定
    print('用户确认操作');
  } else {
    // 用户点击了取消或关闭对话框
    print('用户取消操作');
  }
}

4.3 barrierDismissible - 点击遮罩关闭

控制用户是否可以通过点击对话框外部区域来关闭对话框。

showDialog(
  context: context,
  barrierDismissible: false,  // 禁止点击遮罩关闭
  builder: (BuildContext context) {
    return AlertDialog(
      title: const Text('重要提示'),
      content: const Text('请仔细阅读并确认'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('我已了解'),
        ),
      ],
    );
  },
)

适用场景：

• barrierDismissible: true（默认）：普通提示、选择对话框
• barrierDismissible: false：重要确认、协议同意、强制更新

---

五、常见对话框类型

5.1 确认对话框

用于需要用户确认的重要操作。

Future<bool> _showDeleteConfirm(BuildContext context) async {
  final result = await showDialog<bool>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Row(
          children: [
            Icon(Icons.warning, color: Colors.orange),
            SizedBox(width: 8),
            Text('确认删除'),
          ],
        ),
        content: const Text('删除后数据将无法恢复，确定要删除吗？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, true),
            style: TextButton.styleFrom(foregroundColor: Colors.red),
            child: const Text('删除'),
          ),
        ],
      );
    },
  );
  return result ?? false;
}

5.2 列表选择对话框

用于从多个选项中选择一个。

Future<String?> _showListDialog(BuildContext context) async {
  return await showDialog<String>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('选择颜色'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            _buildListTile(context, '红色', Colors.red),
            _buildListTile(context, '绿色', Colors.green),
            _buildListTile(context, '蓝色', Colors.blue),
            _buildListTile(context, '黄色', Colors.yellow),
          ],
        ),
      );
    },
  );
}

Widget _buildListTile(BuildContext context, String name, Color color) {
  return ListTile(
    leading: CircleAvatar(backgroundColor: color, radius: 12),
    title: Text(name),
    onTap: () => Navigator.pop(context, name),
  );
}

5.3 表单对话框

用于收集用户输入。

Future<String?> _showInputDialog(BuildContext context) async {
  final controller = TextEditingController();
  
  return await showDialog<String>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('输入名称'),
        content: TextField(
          controller: controller,
          autofocus: true,
          decoration: const InputDecoration(
            hintText: '请输入名称',
            border: OutlineInputBorder(),
          ),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, controller.text),
            child: const Text('确定'),
          ),
        ],
      );
    },
  );
}

5.4 等待对话框

用于显示加载状态。

Future<void> _showLoadingDialog(BuildContext context) async {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return const AlertDialog(
        content: Row(
          children: [
            CircularProgressIndicator(),
            SizedBox(width: 20),
            Text('加载中...'),
          ],
        ),
      );
    },
  );

  // 模拟异步操作
  await Future.delayed(const Duration(seconds: 2));

  // 关闭对话框
  Navigator.of(context).pop();
}

5.5 自定义内容对话框

完全自定义对话框内容。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      content: SizedBox(
        width: 300,
        height: 200,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(
              Icons.check_circle,
              color: Colors.green,
              size: 64,
            ),
            const SizedBox(height: 16),
            const Text(
              '操作成功！',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('确定'),
            ),
          ],
        ),
      ),
    );
  },
)

---

六、AlertDialog 样式定制

6.1 圆角对话框

AlertDialog(
  title: const Text('圆角对话框'),
  content: const Text('这是一个带圆角的对话框'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('确定'),
    ),
  ],
)

6.2 渐变背景对话框

使用 Container 和 decoration 实现渐变背景。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: Container(
        decoration: BoxDecoration(
          gradient: const LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xFF667eea), Color(0xFF764ba2)],
          ),
          borderRadius: BorderRadius.circular(16),
        ),
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                '渐变对话框',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              const Text(
                '这是一个带渐变背景的对话框',
                style: TextStyle(color: Colors.white70),
              ),
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: () => Navigator.pop(context),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white,
                  foregroundColor: const Color(0xFF667eea),
                ),
                child: const Text('关闭'),
              ),
            ],
          ),
        ),
      ),
    );
  },
)

6.3 图标标题对话框

AlertDialog(
  title: Row(
    children: const [
      Icon(Icons.info, color: Colors.blue),
      SizedBox(width: 8),
      Text('信息提示'),
    ],
  ),
  content: const Text('这是一条重要信息，请仔细阅读。'),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('我知道了'),
    ),
  ],
)

6.4 无标题对话框

AlertDialog(
  content: const Text('这是一个没有标题的对话框，内容更加简洁。'),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('确定'),
    ),
  ],
)

---

七、实际应用场景

7.1 删除确认

class DeleteConfirmPage extends StatelessWidget {
  const DeleteConfirmPage({super.key});

  Future<void> _deleteItem(BuildContext context) async {
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Row(
            children: [
              Icon(Icons.delete, color: Colors.red),
              SizedBox(width: 8),
              Text('确认删除'),
            ],
          ),
          content: const Text('此操作不可撤销，确定要删除这条数据吗？'),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context, false),
              child: const Text('取消'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, true),
              style: TextButton.styleFrom(foregroundColor: Colors.red),
              child: const Text('删除'),
            ),
          ],
        );
      },
    );

    if (confirmed == true && context.mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('删除成功')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('删除确认')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _deleteItem(context),
          style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
          child: const Text('删除数据'),
        ),
      ),
    );
  }
}

7.2 退出登录

class LogoutConfirmPage extends StatelessWidget {
  const LogoutConfirmPage({super.key});

  Future<void> _logout(BuildContext context) async {
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('退出登录'),
          content: const Text('确定要退出当前账号吗？'),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context, false),
              child: const Text('取消'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, true),
              child: const Text('退出'),
            ),
          ],
        );
      },
    );

    if (confirmed == true) {
      // 执行退出登录逻辑
      print('用户已退出登录');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('退出登录')),
      body: Center(
        child: OutlinedButton(
          onPressed: () => _logout(context),
          child: const Text('退出登录'),
        ),
      ),
    );
  }
}

7.3 版本更新

class UpdateDialogPage extends StatelessWidget {
  const UpdateDialogPage({super.key});

  Future<void> _checkUpdate(BuildContext context) async {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Row(
            children: [
              Icon(Icons.system_update, color: Colors.blue),
              SizedBox(width: 8),
              Text('发现新版本'),
            ],
          ),
          content: const Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('v2.0.0'),
              SizedBox(height: 8),
              Text('更新内容：'),
              SizedBox(height: 4),
              Text('• 新增深色模式'),
              Text('• 优化页面性能'),
              Text('• 修复已知问题'),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('稍后更新'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
                // 开始下载更新
              },
              child: const Text('立即更新'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('版本更新')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _checkUpdate(context),
          child: const Text('检查更新'),
        ),
      ),
    );
  }
}

7.4 权限请求

class PermissionDialogPage extends StatelessWidget {
  const PermissionDialogPage({super.key});

  Future<bool> _requestPermission(BuildContext context) async {
    final result = await showDialog<bool>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Row(
            children: [
              Icon(Icons.location_on, color: Colors.green),
              SizedBox(width: 8),
              Text('位置权限'),
            ],
          ),
          content: const Text('应用需要获取您的位置信息以提供更好的服务，是否授权？'),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context, false),
              child: const Text('拒绝'),
            ),
            ElevatedButton(
              onPressed: () => Navigator.pop(context, true),
              child: const Text('允许'),
            ),
          ],
        );
      },
    );
    return result ?? false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('权限请求')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final granted = await _requestPermission(context);
            if (granted) {
              print('权限已授权');
            }
          },
          child: const Text('请求位置权限'),
        ),
      ),
    );
  }
}

---

八、完整示例代码

下面是一个完整的 Flutter 应用示例，展示 AlertDialog 组件的各种用法。

import 'package:flutter/material.dart';

void main() {
  runApp(const AlertDialogDemo());
}

class AlertDialogDemo extends StatelessWidget {
  const AlertDialogDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AlertDialog 组件演示',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.light(
          primary: const Color(0xFF6366F1),
          secondary: const Color(0xFF8B5CF6),
          surface: const Color(0xFFE8EAF6),
          background: const Color(0xFFF8F9FF),
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      home: const AlertDialogPage(),
    );
  }
}

class AlertDialogPage extends StatelessWidget {
  const AlertDialogPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AlertDialog 组件演示'),
        centerTitle: true,
        elevation: 0,
      ),
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFFE8F4FF),
              Color(0xFFF8F9FF),
            ],
          ),
        ),
        child: SafeArea(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                _buildHeader(),
                const SizedBox(height: 24),
                _buildButton(
                  context,
                  icon: Icons.info,
                  title: '基础对话框',
                  subtitle: '显示简单的提示信息',
                  color: Colors.blue,
                  onTap: () => _showBasicDialog(context),
                ),
                const SizedBox(height: 12),
                _buildButton(
                  context,
                  icon: Icons.delete,
                  title: '确认删除',
                  subtitle: '删除前确认操作',
                  color: Colors.red,
                  onTap: () => _showDeleteDialog(context),
                ),
                const SizedBox(height: 12),
                _buildButton(
                  context,
                  icon: Icons.list,
                  title: '列表选择',
                  subtitle: '从列表中选择一项',
                  color: Colors.green,
                  onTap: () => _showListDialog(context),
                ),
                const SizedBox(height: 12),
                _buildButton(
                  context,
                  icon: Icons.edit,
                  title: '输入对话框',
                  subtitle: '收集用户输入',
                  color: Colors.orange,
                  onTap: () => _showInputDialog(context),
                ),
                const SizedBox(height: 12),
                _buildButton(
                  context,
                  icon: Icons.hourglass_empty,
                  title: '加载对话框',
                  subtitle: '显示加载状态',
                  color: Colors.purple,
                  onTap: () => _showLoadingDialog(context),
                ),
                const SizedBox(height: 12),
                _buildButton(
                  context,
                  icon: Icons.palette,
                  title: '自定义样式',
                  subtitle: '渐变背景对话框',
                  color: Colors.teal,
                  onTap: () => _showGradientDialog(context),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFF6366F1),
            Color(0xFF8B5CF6),
            Color(0xFFEC4899),
          ],
        ),
        borderRadius: BorderRadius.circular(24),
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF6366F1).withOpacity(0.3),
            blurRadius: 20,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: const Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '💬 AlertDialog',
            style: TextStyle(
              fontSize: 32,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          SizedBox(height: 8),
          Text(
            '探索 Flutter for OpenHarmony 中对话框组件的各种用法',
            style: TextStyle(
              fontSize: 16,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildButton(
    BuildContext context, {
    required IconData icon,
    required String title,
    required String subtitle,
    required Color color,
    required VoidCallback onTap,
  }) {
    return Card(
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
        side: BorderSide(color: Colors.grey.withOpacity(0.2)),
      ),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(16),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            children: [
              Container(
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                  color: color.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Icon(icon, color: color, size: 24),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                        color: Color(0xFF1E293B),
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      subtitle,
                      style: TextStyle(
                        fontSize: 14,
                        color: Colors.grey[600],
                      ),
                    ),
                  ],
                ),
              ),
              Icon(Icons.chevron_right, color: Colors.grey[400]),
            ],
          ),
        ),
      ),
    );
  }

  void _showBasicDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('提示'),
          content: const Text('这是一个基础的 AlertDialog 对话框，用于显示简单的提示信息。'),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('确定'),
            ),
          ],
        );
      },
    );
  }

  Future<void> _showDeleteDialog(BuildContext context) async {
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Row(
            children: [
              Icon(Icons.warning, color: Colors.orange),
              SizedBox(width: 8),
              Text('确认删除'),
            ],
          ),
          content: const Text('删除后数据将无法恢复，确定要删除吗？'),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context, false),
              child: const Text('取消'),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, true),
              style: TextButton.styleFrom(foregroundColor: Colors.red),
              child: const Text('删除'),
            ),
          ],
        );
      },
    );

    if (confirmed == true && context.mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('删除成功'),
          backgroundColor: Colors.green,
        ),
      );
    }
  }

  Future<void> _showListDialog(BuildContext context) async {
    final result = await showDialog<String>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('选择颜色'),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildColorOption(context, '红色', Colors.red),
              _buildColorOption(context, '绿色', Colors.green),
              _buildColorOption(context, '蓝色', Colors.blue),
              _buildColorOption(context, '紫色', Colors.purple),
            ],
          ),
        );
      },
    );

    if (result != null && context.mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('选择了：$result')),
      );
    }
  }

  Widget _buildColorOption(BuildContext context, String name, Color color) {
    return ListTile(
      leading: CircleAvatar(backgroundColor: color, radius: 12),
      title: Text(name),
      onTap: () => Navigator.pop(context, name),
    );
  }

  Future<void> _showInputDialog(BuildContext context) async {
    final controller = TextEditingController();
    
    final result = await showDialog<String>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('输入名称'),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
          content: TextField(
            controller: controller,
            autofocus: true,
            decoration: InputDecoration(
              hintText: '请输入名称',
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('取消'),
            ),
            ElevatedButton(
              onPressed: () => Navigator.pop(context, controller.text),
              child: const Text('确定'),
            ),
          ],
        );
      },
    );

    if (result != null && result.isNotEmpty && context.mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('输入的内容：$result')),
      );
    }
  }

  Future<void> _showLoadingDialog(BuildContext context) async {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
          content: Padding(
            padding: const EdgeInsets.symmetric(vertical: 20),
            child: Row(
              children: [
                const CircularProgressIndicator(),
                const SizedBox(width: 20),
                const Text('加载中...'),
              ],
            ),
          ),
        );
      },
    );

    await Future.delayed(const Duration(seconds: 2));

    if (context.mounted) {
      Navigator.pop(context);
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('加载完成'),
          backgroundColor: Colors.green,
        ),
      );
    }
  }

  void _showGradientDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
          child: Container(
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Color(0xFF667eea), Color(0xFF764ba2)],
              ),
              borderRadius: BorderRadius.circular(20),
            ),
            child: Padding(
              padding: const EdgeInsets.all(24),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Icon(
                    Icons.auto_awesome,
                    color: Colors.white,
                    size: 48,
                  ),
                  const SizedBox(height: 16),
                  const Text(
                    '渐变对话框',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 12),
                  const Text(
                    '这是一个带渐变背景的自定义对话框',
                    style: TextStyle(
                      color: Colors.white70,
                      fontSize: 14,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 24),
                  ElevatedButton(
                    onPressed: () => Navigator.pop(context),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white,
                      foregroundColor: const Color(0xFF667eea),
                      padding: const EdgeInsets.symmetric(
                        horizontal: 32,
                        vertical: 12,
                      ),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                    child: const Text('关闭'),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

---

九、总结

AlertDialog 是 Flutter for OpenHarmony 应用开发中最常用的交互组件之一。通过本文的学习，我们掌握了：

1. 基础用法：使用 showDialog 函数显示对话框，通过 Navigator.pop() 关闭对话框
2. 常用属性：title、content、actions、backgroundColor、shape 等属性的灵活运用
3. 对话框类型：确认对话框、列表选择、表单输入、加载状态等多种应用场景
4. 样式定制：圆角、渐变背景、自定义内容等个性化设计
5. 最佳实践：合理设置 barrierDismissible、返回值处理、用户体验优化

💡 开发建议：对话框是重要的用户交互组件，使用时应注意：

• 保持内容简洁，避免信息过载
• 按钮文字清晰明确，让用户一目了然
• 危险操作使用警示颜色，防止误操作
• 重要操作禁止点击遮罩关闭，确保用户明确确认

---