ArkUI AlertDialog：确认弹窗别一上来就吓人

今天我们用 AlertDialog 做三种确认场景：单按钮说明、双按钮选择、危险操作确认。

AlertDialog 会打断用户当前动作，所以我们别把它当成普通提示来用。只有用户需要做决定，或者必须看清楚后果时，它才值得出现。

单按钮说明

第一种是单按钮弹窗。

this.getUIContext().showAlertDialog({
  title: '草稿已经保存',
  message: '你可以稍后继续编辑，这一步只需要让用户知道结果。',
  autoCancel: true,
  confirm: {
    value: '知道了',
    action: () => {
      console.info('AlertDialog single confirm')
    }
  }
})

它适合“结果已经发生，只需要用户知道”的场景。按钮文案写成“知道了”比“确定”更像人在说话。

双按钮选择

第二种是双按钮弹窗。

this.getUIContext().showAlertDialog({
  title: '离开当前编辑？',
  message: '离开后未提交的内容不会发布，但已经保存的草稿还在。',
  primaryButton: {
    value: '继续编辑',
    action: () => {
      console.info('AlertDialog keep editing')
    }
  },
  secondaryButton: {
    value: '离开',
    fontColor: '#2563EB',
    action: () => {
      console.info('AlertDialog leave page')
    }
  }
})

这里的重点不是“有两个按钮”，而是两个按钮要表达两个明确选择。不要只写“取消”和“确定”，用户还得自己猜确定的是哪件事。

危险操作确认

第三种是危险操作确认。

this.getUIContext().showAlertDialog({
  title: '删除这条记录？',
  message: '删除后页面里不会再显示这条记录。这里不做真实删除，只演示危险操作确认。',
  primaryButton: {
    value: '取消',
    action: () => {
      console.info('AlertDialog cancel delete')
    }
  },
  secondaryButton: {
    value: '删除',
    fontColor: '#DC2626',
    action: () => {
      console.info('AlertDialog confirm delete')
    }
  }
})

危险动作要说清楚后果，但不要把一整套业务塞进弹窗。我们这篇只打印日志，保持案例干净。

你做过的项目里，哪个确认弹窗最容易让人误点？可以拿它和这里的按钮文案对比一下。

完整代码

@Entry
@Component
struct ArkUIAlertDialogDemo {
  private showSingleButtonDialog(): void {
    this.getUIContext().showAlertDialog({
      title: '草稿已经保存',
      message: '你可以稍后继续编辑，这一步只需要让用户知道结果。',
      autoCancel: true,
      confirm: {
        value: '知道了',
        action: () => {
          console.info('AlertDialog single confirm')
        }
      }
    })
  }

  private showTwoButtonDialog(): void {
    this.getUIContext().showAlertDialog({
      title: '离开当前编辑？',
      message: '离开后未提交的内容不会发布，但已经保存的草稿还在。',
      autoCancel: true,
      primaryButton: {
        value: '继续编辑',
        action: () => {
          console.info('AlertDialog keep editing')
        }
      },
      secondaryButton: {
        value: '离开',
        fontColor: '#2563EB',
        action: () => {
          console.info('AlertDialog leave page')
        }
      }
    })
  }

  private showDangerDialog(): void {
    this.getUIContext().showAlertDialog({
      title: '删除这条记录？',
      message: '删除后页面里不会再显示这条记录。这里不做真实删除，只演示危险操作确认。',
      autoCancel: true,
      primaryButton: {
        value: '取消',
        action: () => {
          console.info('AlertDialog cancel delete')
        }
      },
      secondaryButton: {
        value: '删除',
        fontColor: '#DC2626',
        action: () => {
          console.info('AlertDialog confirm delete')
        }
      }
    })
  }

  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 6 }) {
      Text(title)
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
      Text(desc)
        .fontSize(13)
        .fontColor('#6B7280')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  dialogCard(title: string, desc: string) {
    Column({ space: 6 }) {
      Column({ space: 6 }) {
        Text(title)
          .fontSize(17)
          .fontWeight(FontWeight.Bold)
          .fontColor('#111827')
        Text(desc)
          .fontSize(13)
          .fontColor('#6B7280')
          .lineHeight(20)
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .padding(16)
    .borderRadius(14)
    .backgroundColor('#FFFFFF')
    .border({ width: 1, color: '#E5E7EB' })
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 22 }) {
        Column({ space: 8 }) {
          Text('ArkUI AlertDialog')
            .fontSize(28)
            .fontWeight(FontWeight.Bold)
            .fontColor('#111827')
          Text('确认弹窗别一上来就吓人')
            .fontSize(16)
            .fontColor('#4B5563')
          Text('AlertDialog 会打断当前操作，所以我们只在需要用户确认时使用。单纯提醒结果时，轻提示通常更合适。')
            .fontSize(14)
            .fontColor('#6B7280')
            .lineHeight(22)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('单按钮：只需要用户知道', '单按钮适合“结果已经发生”的说明，不需要再让用户选择。')
        this.dialogCard('保存结果', '标题说结论，正文补一句原因，按钮只保留一个清晰动作。')
        Button('打开单按钮弹窗')
          .fontSize(14)
          .fontColor('#FFFFFF')
          .backgroundColor('#2563EB')
          .borderRadius(18)
          .height(38)
          .padding({ left: 18, right: 18 })
          .onClick(() => this.showSingleButtonDialog())

        this.sectionTitle('双按钮：让用户做决定', '离开、放弃、覆盖这类动作更适合双按钮确认。按钮文案要写具体。')
        this.dialogCard('离开确认', '一个按钮保留当前操作，另一个按钮继续离开。')
        Button('打开双按钮弹窗')
          .fontSize(14)
          .fontColor('#FFFFFF')
          .backgroundColor('#0F766E')
          .borderRadius(18)
          .height(38)
          .padding({ left: 18, right: 18 })
          .onClick(() => this.showTwoButtonDialog())

        this.sectionTitle('危险操作：把后果说清楚', '删除、清空、重置这类操作要让用户看到后果，但不要把业务流程塞进弹窗。')
        this.dialogCard('删除确认', '示例只打印日志，不做真实数据处理。')
        Button('打开危险确认')
          .fontSize(14)
          .fontColor('#FFFFFF')
          .backgroundColor('#DC2626')
          .borderRadius(18)
          .height(38)
          .padding({ left: 18, right: 18 })
          .onClick(() => this.showDangerDialog())
      }
      .width('100%')
      .padding(24)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8FAFC')
  }
}