CupertinoAlertDialog

iOS风格对话框的组件

CupertinoAlertDialog是Flutter中用于实现iOS风格对话框的组件,遵循Apple的Human Interface Guidelines。它通常用于关键决策场景(如确认删除操作)或重要信息提示,通过模态窗口中断用户当前流程,确保注意力集中。其核心逻辑包括:

  • 模态交互: 强制用户响应后方可关闭,防止意外操作。
  • 自适应样式: 自动匹配iOS系统的视觉规范(如圆角、字体、动效)。
  • 动作按钮管理: 通过actions列表提供可选操作,按钮按需垂直排列。

典型使用场景

  • 确认高风险操作(如退出编辑、删除数据)。
  • 显示错误或警告信息(如网络连接失败)。
  • 请求用户权限(如访问相册、位置)。

示例

基础确认对话框

CupertinoAlertDialog(
  title: Text("删除确认"),
  content: Text("确定要删除此项目吗?此操作不可撤销。"),
  actions: [
    CupertinoDialogAction(
      child: Text("取消"),
      onPressed: () => Navigator.pop(context), // 关闭对话框
    ),
    CupertinoDialogAction(
      isDestructiveAction: true, // 标记为危险操作(红色文本)
      child: Text("删除"),
      onPressed: () {
        _deleteItem(); // 执行删除逻辑
        Navigator.pop(context);
      },
    ),
  ],
)

带输入框的复杂对话框

CupertinoAlertDialog(
  title: Text("重命名文件"),
  content: CupertinoTextField(
    placeholder: "输入新名称",
    onChanged: (value) => _newName = value,
  ),
  actions: [
    CupertinoDialogAction(
      child: Text("取消"),
      onPressed: () => Navigator.pop(context),
    ),
    CupertinoDialogAction(
      child: Text("确认"),
      onPressed: _newName.isEmpty ? null : () { // 空值时禁用按钮
        _renameFile(_newName);
        Navigator.pop(context);
      },
    ),
  ],
)

适配深色主题的警告对话框

CupertinoAlertDialog(
  title: Text("存储空间不足", style: TextStyle(color: CupertinoColors.systemRed)),
  content: Text("请清理空间后重试。"),
  actions: [
    CupertinoDialogAction(
      isDefaultAction: true, // 标记为默认操作(粗体)
      child: Text("设置"),
      onPressed: () => _openSettings(),
    ),
    CupertinoDialogAction(
      child: Text("稍后"),
      onPressed: () => Navigator.pop(context),
    ),
  ],
)

注意点

性能与兼容性

  • 避免在actions中嵌套过多按钮(iOS规范建议不超过3个),否则可能引起滚动性能问题。
  • 在非iOS平台使用时,需测试字体和动效的兼容性(可通过CupertinoApp统一风格)。

用户体验优化

  • 危险操作(如删除)应使用isDestructiveAction: true突出显示。
  • 通过isDefaultAction: true标记用户最可能选择的选项,提升操作效率。

常见问题

  • 对话框内容过长时,系统会自动启用滚动,但需避免极端高度导致渲染异常。
  • 使用Navigator.pop(context)关闭对话框时,需确保context属于当前对话框层级。

构造函数

const CupertinoAlertDialog({
  Key? key,
  Widget? title,          // 标题组件(通常为Text)
  Widget? content,        // 内容区域组件
  List<Widget>? actions,  // 操作按钮列表
})

属性

属性名属性类型说明
titleWidget?对话框标题,通常显示为加粗文本。
contentWidget?主要内容区域,支持任意组件(如Text、Column嵌套多行内容)。
actionsList<Widget>?操作按钮列表,需使用CupertinoDialogAction组件。

关键属性深度解析

  • actions: 此属性接收一个CupertinoDialogAction组件列表,按钮按声明顺序垂直排列。若需实现“取消按钮在底部”的iOS标准样式,应将取消按钮声明在列表末尾(示例1所示)。
  • titlecontent的协作: 当同时设置titlecontent时,系统会自动添加间距和分割线。若仅设置content,对话框会自适应内容高度,避免空白区域。