[Flutter]介绍些flutter的弹窗

一、基础对话框（AlertDialog）

Material 风格的基础弹窗，包含标题、内容和操作按钮，适用于 Android 或通用场景。

基本用法：

// 触发弹窗的按钮
ElevatedButton(
  onPressed: () {
    // 显示弹窗
    showDialog(
      context: context, // 必传，上下文
      barrierDismissible: false, // 点击弹窗外部是否关闭（false=不关闭）
      builder: (context) {
        // 返回弹窗内容
        return AlertDialog(
          title: Text("提示"), // 标题
          content: Text("确定要执行此操作吗？"), // 内容
          // 操作按钮（右侧优先）
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context); // 关闭弹窗
              },
              child: Text("取消"),
            ),
            TextButton(
              onPressed: () {
                // 执行确认逻辑
                print("确认操作");
                Navigator.pop(context); // 关闭弹窗
              },
              child: Text("确认"),
            ),
          ],
        );
      },
    );
  },
  child: Text("显示基础弹窗"),
)

二、iOS 风格对话框（CupertinoAlertDialog）

遵循 iOS 设计规范的弹窗，适用于 Cupertino 风格的应用。

基本用法：

    ElevatedButton(
      onPressed: () {
        showCupertinoDialog(
          context: context,
          barrierDismissible: false,
          builder: (context) {
            return CupertinoAlertDialog(
              title: Text("提示"),
              content: Text("确定要执行此操作吗？"),
              actions: [
                CupertinoDialogAction(
                  onPressed: () => Navigator.pop(context),
                  child: Text("取消"),
                ),
                CupertinoDialogAction(
                  isDestructiveAction: true, // 强调按钮（通常用于删除等危险操作）
                  onPressed: () {
                    print("确认操作");
                    Navigator.pop(context);
                  },
                  child: Text("确认"),
                ),
              ],
            );
          },
        );
      },
      child: Text("显示iOS风格弹窗"),
    )

三、底部弹窗（ActionSheet）

从底部滑出的弹窗，适合展示一组操作选项。

Material 风格（ActionSheet）：

    ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          shape: RoundedRectangleBorder( // 顶部圆角
            borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
          ),
          builder: (context) {
            return Container(
              padding: EdgeInsets.all(16),
              child: Column(
                mainAxisSize: MainAxisSize.min, // 适应内容高度
                children: [
                  Text("请选择操作", style: TextStyle(fontSize: 18)),
                  SizedBox(height: 16),
                  ListTile(
                    leading: Icon(Icons.share),
                    title: Text("分享"),
                    onTap: () {
                      print("分享");
                      Navigator.pop(context);
                    },
                  ),
                  ListTile(
                    leading: Icon(Icons.delete),
                    title: Text("删除"),
                    textColor: Colors.red,
                    onTap: () {
                      print("删除");
                      Navigator.pop(context);
                    },
                  ),
                ],
              ),
            );
          },
        );
      },
      child: Text("显示底部弹窗"),
    )

iOS 风格（CupertinoActionSheet）：

    ElevatedButton(
      onPressed: () {
        showCupertinoModalPopup(
          context: context,
          builder: (context) {
            return CupertinoActionSheet(
              title: Text("请选择操作"),
              actions: [
                CupertinoActionSheetAction(
                  onPressed: () {
                    print("分享");
                    Navigator.pop(context);
                  },
                  child: Text("分享"),
                ),
                CupertinoActionSheetAction(
                  isDestructiveAction: true, // 红色危险操作
                  onPressed: () {
                    print("删除");
                    Navigator.pop(context);
                  },
                  child: Text("删除"),
                ),
              ],
              cancelButton: CupertinoActionSheetAction(
                onPressed: () => Navigator.pop(context),
                child: Text("取消"),
              ),
            );
          },
        );
      },
      child: Text("显示iOS底部弹窗"),
    )

四、带输入框的弹窗

包含文本输入框的弹窗，用于获取用户输入（如修改名称）。

    ElevatedButton(
      onPressed: () {
        TextEditingController controller = TextEditingController();
        showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: Text("输入名称"),
              content: TextField(
                controller: controller,
                decoration: InputDecoration(hintText: "请输入..."),
              ),
              actions: [
                TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text("取消"),
                ),
                TextButton(
                  onPressed: () {
                    print("输入内容：${controller.text}");
                    Navigator.pop(context);
                  },
                  child: Text("确认"),
                ),
              ],
            );
          },
        );
      },
      child: Text("显示输入弹窗"),
    )

五、核心要点

1. 显示弹窗 ：通过 showDialog（Material）或 showCupertinoDialog（iOS）触发，传入 context 和 builder（构建弹窗内容）。
2. 关闭弹窗 ：调用 Navigator.pop(context)，可携带返回值（如 Navigator.pop(context, "返回数据")）。
3. 交互控制 ：barrierDismissible 控制点击外部是否关闭弹窗（默认 true）。
4. 自定义样式 ：通过 shape、backgroundColor 等属性修改弹窗外观，或直接使用 Container 构建完全自定义的弹窗内容。

总结

Flutter 弹窗的核心是通过 showDialog 系列方法触发，根据平台风格选择 AlertDialog 或 CupertinoAlertDialog，通过 actions 定义按钮交互，通过 Navigator.pop 关闭。对于特殊需求（如底部弹窗、输入框弹窗），可使用 showModalBottomSheet 或自定义内容组件。