Flutter 对话框详解

封面图 • 2025-11-04 • Flutter

在 Flutter 中，**对话框（Dialog）** 是一种用于与用户进行简单交互的 UI 组件。常见的对话框包括 `AlertDialog`、`SimpleDialog` 和 `showDialog()` 等。下面是对 Flutter 对话框的详细讲解。

---

## 一、Flutter 对话框的基本概念

在 Flutter 中，对话框是通过 `showDialog()` 函数显示的，并且通常使用 `MaterialPageRoute` 或 `CupertinoPageRoute` 来实现动画效果。

### 基本结构：

```dart
showDialog(
  context: context,
  builder: (BuildContext context) {
    return Dialog(
      child: Container(
        // 对话框内容
      ),
    );
  },
);
```

---

## 二、常用的对话框类型

### 1. `AlertDialog` —— 弹窗对话框

这是最常用的对话框类型，常用于提示信息、确认操作等。

#### 示例代码：

```dart
showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text("提示"),
    content: Text("您确定要删除此文件吗？"),
    actions: [
      TextButton(
        onPressed: Navigator.of(context).pop,
        child: Text("取消"),
      ),
      TextButton(
        onPressed: () {
          // 执行删除操作
          Navigator.of(context).pop();
        },
        child: Text("确定"),
      ),
    ],
  ),
);
```

#### 特点：
- 可以设置标题、内容、动作按钮。
- 支持 Material 风格。

---

### 2. `SimpleDialog` —— 简单选择对话框

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

#### 示例代码：

```dart
showDialog(
  context: context,
  builder: (context) => SimpleDialog(
    title: Text("请选择一个选项"),
    children: [
      SimpleDialogOption(
        onPressed: () {
          Navigator.of(context).pop('选项1');
        },
        child: Text("选项1"),
      ),
      SimpleDialogOption(
        onPressed: () {
          Navigator.of(context).pop('选项2');
        },
        child: Text("选项2"),
      ),
    ],
  ),
);
```

#### 特点：
- 更简洁，适合菜单类选择。
- 不支持复杂布局。

---

### 3. 自定义 `Dialog`

你可以自定义任何类型的对话框，比如包含图片、表单等。

#### 示例代码：

```dart
showDialog(
  context: context,
  builder: (context) => Dialog(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    child: Container(
      padding: EdgeInsets.all(16),
      width: 300,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text("自定义对话框", style: TextStyle(fontSize: 20)),
          SizedBox(height: 10),
          TextField(decoration: InputDecoration(hintText: "请输入内容")),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: Navigator.of(context).pop,
            child: Text("确认"),
          ),
        ],
      ),
    ),
  ),
);
```

---

## 三、其他常用对话框组件

### 1. `showCupertinoDialog`（iOS 风格）

如果你希望在 iOS 上使用原生风格的对话框，可以使用 `showCupertinoDialog`。

```dart
showCupertinoDialog(
  context: context,
  builder: (context) => CupertinoAlertDialog(
    title: Text("提示"),
    content: Text("您确定要删除此文件吗？"),
    actions: [
      CupertinoDialogAction(
        isDefaultAction: true,
        onPressed: Navigator.of(context).pop,
        child: Text("取消"),
      ),
      CupertinoDialogAction(
        isDestructiveAction: true,
        onPressed: () {
          // 删除操作
          Navigator.of(context).pop();
        },
        child: Text("确定"),
      ),
    ],
  ),
);
```

---

### 2. `showModalBottomSheet` —— 底部弹出菜单

虽然不是传统意义上的“对话框”，但常用于展示选项或操作。

```dart
showModalBottomSheet(
  context: context,
  builder: (context) => ListView(
    children: [
      ListTile(
        title: Text("选项1"),
        onTap: () { Navigator.pop(context); },
      ),
      ListTile(
        title: Text("选项2"),
        onTap: () { Navigator.pop(context); },
      ),
    ],
  ),
);
```

---

## 四、对话框的注意事项

| 事项 | 说明 |
|------|------|
| **必须使用 `Navigator` 关闭对话框** | 使用 `Navigator.of(context).pop()` |
| **不要在 `builder` 中直接使用 `setState`** | 否则会导致无限循环或错误 |
| **避免在 `Dialog` 中使用复杂布局** | 会降低性能和用户体验 |
| **考虑平台风格差异** | 使用 `showCupertinoDialog` 实现 iOS 风格 |

---

## 五、总结

| 对话框类型 | 用途 | 是否推荐 |
|------------|------|----------|
| `AlertDialog` | 确认/提示操作 | ✅ 推荐 |
| `SimpleDialog` | 多个选项选择 | ✅ 推荐 |
| `Dialog` | 自定义内容 | ✅ 推荐 |
| `showCupertinoDialog` | iOS 风格 | ✅ 推荐 |
| `showModalBottomSheet` | 底部菜单 | ✅ 推荐 |

---

如果你有具体的使用场景（如：登录、确认删除、选择图片等），我可以为你提供更详细的示例代码。需要的话请告诉我！