一文彻底掌握HarmonyOS NEXTArkUI 弹出框全攻略：从自定义到「即用型」，轻松拿捏交互体验

本文链接：https://blog.csdn.net/xingfei_work/article/details/147920930

🚀 ArkUI 弹出框全攻略：从自定义到「即用型」，轻松拿捏交互体验

一、弹窗小课堂：模态窗口的「七十二变」

想象一下：用户正在你的App里愉快操作，突然需要一个「临时小助手」提醒关键信息——这就是弹出框的使命！

作为模态窗口，它会暂时「霸屏」，直到用户完成交互才会消失。ArkUI 贴心提供了两大流派：

DIY手办派（自定义弹出框）：想怎么凹造型就怎么凹，从布局到组件全由你掌控，适合复杂交互场景。
即插即用派（固定样式弹出框）：像搭积木一样直接填内容，搞定简单提示、选择、确认等高频场景，省时又省力！

📦 自定义弹出框：你的弹窗你做主

1. 不依赖UI组件的「全局自由侠」（openCustomDialog）

适合需要动态更新弹窗属性的场景，比如根据用户输入实时变化的内容。它支持「模态」（必须处理完才能继续）和「非模态」（可暂时忽略）两种模式，还贴心配备了生命周期钩子：
onWillAppear → onDidAppear → onWillDisappear → onDidDisappear，让你全程掌控弹窗的「出生到离场」。

2. 手把手教你打造「个性弹窗」

Step 1：给弹窗一个「家」（封装弹窗类）

import { ComponentContent, promptAction, UIContext } from '@kit.ArkUI';

export class FirstDialog {
  ctx?: UIContext; // 上下文对象，弹窗的「户口本」
  content?: ComponentContent<Object>; // 弹窗里的「家具」
  option?: promptAction.BaseDialogOptions; // 弹窗的「装修风格」

  constructor(ui: UIContext, c: ComponentContent<Object>, o: promptAction.BaseDialogOptions) {
    this.ctx = ui;
    this.content = c;
    this.option = o;
  }

  showDialog() {
    this.ctx?.getPromptAction().openCustomDialog(this.content)
      .then(() => console.log("弹窗已上线，请注意查收～")); // 成功弹出的小彩蛋
  }
}

Step 2：装修弹窗「内饰」（自定义内容）

用 @Builder 装饰器打造专属组件，这里塞了图片、文本输入框和按钮，甚至加了红色边框「高亮提醒」：

@Builder 
export function buildDialog(msg: string) {
  Column() {
    Image($r("sys.media.ohos_ic_public_scan")) // 搞个图标镇场
      .width(100).height(100)
    Text(msg) // 显示提示文本
    TextInput({ placeholder: "请输入内容" }) // 让用户互动起来
      .onChange(v => msg = v)
    Button("点我呀") // 按钮点击触发Toast
      .onClick(() => promptAction.showToast({ message: "弹窗内部按钮触发：" + msg }))
  }
  .width("90%") // 宽度留有余地
  .backgroundColor(Color.White) // 白色背景干净清爽
  .padding(10) // 内边距不拥挤
  .border({ style: BorderStyle.Solid, width: 2, color: Color.Red }) // 红色边框划重点！
}

Step 3：在页面中「召唤」弹窗

实例化后绑定按钮点击事件，点击按钮即可「召唤」这个带输入框的弹窗，效果如图：

（想象一下：弹窗带着小红边框「蹦」出来，用户输入内容后点击按钮，Toast实时反馈——交互感拉满！）

🧩 固定样式弹出框：懒人福音，一键搞定常见场景

不需要纠结布局，ArkUI 已经帮你搭好了「模板房」，直接填内容就行！

1. 选择困难症救星：操作菜单（showActionMenu）

适合列出多个选项让用户选择，比如「你爱的食物」列表：

Button("菜单弹出框")
  .onClick(() => {
    promptAction.showActionMenu({
      title: "灵魂拷问：你最爱吃啥？", // 标题带点戏精属性
      buttons: [
        { text: "黄瓜", primary: true, color: "#007dfe" }, // 主按钮标蓝
        { text: "西红柿", color: "#fd750f" }, // 番茄红很应景
        { text: "茄子", color: "#6a0dad" }, // 神秘紫茄子
        { text: "水萝卜", color: "#fd750f" } // 统一橙色系
      ]
    }).then(data => {
      const foods = ["黄瓜", "西红柿", "茄子", "水萝卜"];
      promptAction.showToast({ message: `你的选择是第 ${data.index + 1} 名：${foods[data.index]}` });
    });
  })

点击按钮后，选项列表从底部滑出，点击任意选项触发Toast，简单又直观！

2. 危险操作守护者：对话框（showDialog）

删除、支付等敏感操作必备的「二次确认」弹窗，比如：

Button("删除文件")
  .onClick(() => {
    promptAction.showDialog({
      title: "⚠️ 危险操作", // 标题加警告图标
      message: "亲，删除后不可恢复，确定要继续吗？", // 语气更人性化
      buttons: [
        { text: "我很确定", color: "#e53935" }, // 红色按钮警示
        { text: "再想想", color: "#225473" } // 冷静蓝
      ]
    }).then(data => {
      data.index === 0 
        ? promptAction.showToast({ message: "删除成功，手速真快！" }) 
        : promptAction.showToast({ message: "取消成功，谨慎是美德～" });
    });
  })

用户必须选「确定」或「取消」才能继续，防止误操作。

3. 时间/日期管家：选择器弹窗（PickerDialog）

日历选择器（CalendarPickerDialog）：适合选年月日，带「确认/取消」按钮，支持自定义按钮样式。
日期滑动选择器（DatePickerDialog）：滑动选择日期，可限定时间范围（比如只能选2023-2025年）。
时间滑动选择器（TimePickerDialog）：精确到时分秒，支持24小时制，适合预约、提醒场景。

示例：日期选择三连击

// 日历选择器
Button("选个良辰吉日")
  .onClick(() => {
    CalendarPickerDialog.show({
      selected: new Date(), // 默认选今天
      acceptButtonStyle: { fontColor: Color.Red, backgroundColor: Color.LightGray }, // 红色确认按钮
      onAccept: (v) => promptAction.showToast({ message: `你选了：${v.toLocaleDateString()}` })
    });
  })

// 时间选择器
Button("选个闹钟时间")
  .onClick(() => {
    TimePickerDialog.show({
      format: TimePickerFormat.HOUR_MINUTE, // 只显示时分
      useMilitaryTime: true, // 24小时制
      onAccept: (v) => promptAction.showToast({ message: `时间设定为：${v.hour}:${v.minute}` })
    });
  })