CupertinoDialogAction

用于构建iOS风格对话框操作按钮的组件

CupertinoDialogAction是Flutter中用于构建 iOS 风格对话框操作按钮的组件。它遵循Apple的Human Interface Guidelines,提供简洁、直观的交互体验。该组件通常作为子元 素嵌入到CupertinoAlertDialogCupertinoActionSheet中,用于触发对话框的确认、取消或其他操作。

主要用途

  • 在iOS风格的对话框中创建标准操作按钮(如“确定”“取消”)。
  • 处理用户交互逻辑(如点击后关闭对话框或执行回调函数)。

核心逻辑

  • 按钮样式自动适配iOS设计规范(如颜色、字体、按压效果)。
  • 通过onPressed回调响应点击事件,可自定义行为(如导航、数据提交)。

使用场景

  • 弹出确认对话框(如删除操作前的二次确认)。
  • 展示选择项(如“拍照”或“从相册选择”)。
  • 在操作表中(ActionSheet)提供多个选项按钮。

示例

基础确认对话框

CupertinoAlertDialog(
  title: Text("确认删除"),
  content: Text("删除后数据无法恢复,请谨慎操作!"),
  actions: [
    CupertinoDialogAction(
      child: Text("取消"),
      onPressed: () {
        Navigator.pop(context); // 关闭对话框
      },
    ),
    CupertinoDialogAction(
      child: Text("确认", style: TextStyle(color: CupertinoColors.destructiveRed)),
      onPressed: () {
        // 执行删除逻辑
        deleteItem();
        Navigator.pop(context);
      },
    ),
  ],
)

带禁用状态的操作按钮

CupertinoDialogAction(
  child: Text("提交"),
  isDefaultAction: true, // 默认高亮样式
  onPressed: isFormValid ? () => submitForm() : null, // 禁用状态下按钮变灰
),
CupertinoDialogAction(
  child: Text("重置"),
  isDestructiveAction: true, // 红色警示样式
  onPressed: () => resetForm(),
),

适配暗色主题

CupertinoDialogAction(
  child: Text("高级选项"),
  textStyle: CupertinoTheme.of(context).textTheme.textStyle.copyWith(
    fontWeight: FontWeight.w600,
  ),
  onPressed: () => showAdvancedOptions(),
),

注意点

常见问题

  • 性能瓶颈: 避免在onPressed中执行耗时操作(如网络请求),否则会阻塞UI线程。建议使用异步操作(如Future)并添加加载状态。
  • 兼容性警告: 在非iOS平台使用时,需确保整体UI风格一致(可配合CupertinoApp主题)。

优化技巧

  • 若对话框需要动态更新按钮状态(如表单验证),可将CupertinoDialogAction包裹在StatefulBuilder中实现局部重绘。
  • 使用const构造函数优化性能(如const CupertinoDialogAction()),避免不必要的重建。

最佳实践

  • 重要操作(如删除)使用isDestructiveAction: true突出显示。
  • 默认操作按钮(如“确认”)设置为isDefaultAction: true以便用户快速识别。

构造函数

const CupertinoDialogAction({
  Key? key,
  this.onPressed, // 点击回调函数
  this.isDefaultAction = false, // 是否为默认操作(粗体样式)
  this.isDestructiveAction = false, // 是否为破坏性操作(红色样式)
  this.textStyle, // 自定义文字样式
  required Widget child, // 按钮内容(如 Text 组件)
})

属性

属性名属性类型说明
onPressedVoidCallback?点击按钮时的回调函数。若为 null,按钮表现为禁用状态。
isDefaultActionbool是否为默认操作(true 时文字加粗,通常用于重要操作)。默认 false
isDestructiveActionbool是否为破坏性操作(true 时文字显示为红色)。默认 false
textStyleTextStyle?自定义文字样式,覆盖默认主题样式。
childWidget按钮内容(必须提供,如 Text('确认'))。

关键属性解释

  • onPressed: 最核心的属性,用于处理交互逻辑。若未设置或值为null,按钮会自动变为灰色禁用状态。
  • isDestructiveAction: 设置为true时,按钮文字变为红色,适用于删除、重置等高风险操作,符合iOS设计规范。
  • isDefaultAction: 通常与主要操作绑定(如“确认”),通过加粗样式引导用户注意力。