HarmonyOSNext 一看就懂！ArkUI 弹出框全方位攻略：从自定义到固定，玩转弹窗不迷糊！

 import { PromptAction } from '@kit.ArkUI'; ​ let uiContext = this.getUIContext(); // 步骤1：搞到上下文 let promptAction: PromptAction = uiContext.getPromptAction(); // 步骤2：拿到PromptAction小助手 ​ // 开整！弄个菜单出来~ try {   promptAction.showActionMenu({     title: '爱吃啥水果？ 🍉', // 菜单标题     buttons: [       { text: '苹果 🍎', color: '#FF3B30' }, // 选项1       { text: '香蕉 🍌', color: '#FF9500' }, // 选项2       { text: '西瓜 🍉', color: '#34C759' }, // 选项3     ]   })     .then(data => {       console.info('用户点了第' + (data.index + 1) + '个选项：' + data.text); // data.index 是按钮索引(0开始)     })     .catch((err: Error) => {       console.error('出问题啦！' + err); // 出错就逮住它！     }) } catch (error) {   console.error('初始化就出错！' + error); }

 import { PromptAction } from '@kit.ArkUI'; ​ let uiContext = this.getUIContext(); let promptAction: PromptAction = uiContext.getPromptAction(); ​ try {   promptAction.showDialog({     title: '真的要退出吗？😢', // 对话框标题     message: '辛苦编辑的内容还没保存哦！', // 提示信息     buttons: [       { text: '我再想想', color: '#8E8E93' }, // 按钮1       { text: '狠心退出', color: '#007AFF' }   // 按钮2（通常设为高亮）     ]   }, (err, data) => { // 使用回调函数处理结果     if (err) {       console.error('弹窗出问题！' + err);       return;     }     console.info('用户点了：' + data.index); // 0: "我再想想", 1: "狠心退出"     if (data.index === 1) {       // 执行退出逻辑...     }   }); } catch (error) {   console.error('初始化就出错！' + error); }

 @Entry @Component struct MyPage {   @State selectedDate: Date = new Date('2024-06-12'); // 当前选中日期 ​   build() {     Column() {       Button('选个好日子 📅')         .margin(20)         .onClick(() => {           let uiContext = this.getUIContext(); // 本组件内部获取UIContext           uiContext.showDatePickerDialog({             start: new Date("1990-01-01"), // 最早可选日期             end: new Date("2030-12-31"),   // 最晚可选日期             selected: this.selectedDate,   // 初始选中日期             lunarSwitch: true,             // 显示农历切换开关             showTime: true,                // 显示时间选择（时/分）             onDateAccept: (pickedDate: Date) => { // 用户点确认               this.selectedDate = pickedDate; // 更新选中日期               console.info('你选的日子是：' + pickedDate.toLocaleString());             }           })         })     }   } }

 @Entry @Component struct StylishSheet {   build() {     Column() {       Button('来个炫酷菜单 ✨')         .margin(30)         .onClick(() => {           let uiContext = this.getUIContext();           uiContext.showActionSheet({             title: '炫酷功能菜单 🚀',             message: '挑一个试试看！',             autoCancel: true, // 点外面空白处自动关闭             width: '90%',    // 宽度占屏幕90%             cornerRadius: 24, // 圆角大一点             borderWidth: 2,             borderStyle: BorderStyle.Solid,             borderColor: Color.Magenta, // 骚气紫边框             backgroundColor: Color.Black, // 酷黑背景             transition: TransitionEffect.asymmetric(               // 弹出动画：淡入+放大 (3秒，有点慢为了看清效果，实际别用这么长)               TransitionEffect.OPACITY.animation({ duration: 3000, curve: Curve.Ease })                 .combine(TransitionEffect.scale({ x: 0.8, y: 0.8 }).animation({ duration: 3000, curve: Curve.Ease })),               // 关闭动画：淡出+缩小 (快一点，0.3秒)               TransitionEffect.OPACITY.animation({ duration: 300, curve: Curve.EaseIn })                 .combine(TransitionEffect.scale({ x: 0.8, y: 0.8 }).animation({ duration: 300, curve: Curve.EaseIn }))             ),             confirm: { // 底部那个大大的确认按钮（实际这里可能是“取消”）               value: '收工！👋',               fontColor: Color.White,               backgroundColor: Color.Blue,               action: () => console.info('用户点了确认(取消)按钮')             },             sheets: [               { title: '开灯💡', action: () => console.log('灯亮了！') },               { title: '放音乐🎵', action: () => console.log('Music！') },               { title: '旋转跳跃💃', action: () => console.log('转起来！') }             ]           });         })     }   } }