企业官网建设流程全解析

概述

TipsDialogV2是 HarmonyOS ArkUI 提供的标准上图下文提示弹窗组件，属于 AdvancedDialogV2 系列。
组件内置顶部图标 + 标题 + 内容描述 + 复选框 + 双按钮布局，是系统标准的提示/确认/卸载/警告类弹窗，无需自定义布局即可快速使用。

依赖导入

import{TipsDialogV2,AdvancedDialogV2Button,UIContext}from'@kit.ArkUI';

核心结构：上图下文弹出框（固定布局）

TipsDialogV2 为官方标准上图下文布局：

1. 顶部图标（imageRes）
2. 标题（title）
3. 内容文本（content）
4. 复选框（checkTips + checked）
5. 主按钮 + 次按钮（primaryButton / secondaryButton）

TipsDialogV2({imageRes:图标,title:标题,content:内容,checkTips:复选框文字,checked:绑定状态,primaryButton:主按钮,secondaryButton:次按钮,onCheckedChange:复选框切换事件})

配置详解

1. 上图下文核心配置

imageRes:$r('sys.media.ohos_ic_public_voice'),// 顶部图标（上图）title:'TipsDialogV2',// 标题content:'想要卸载这个APP嘛?',// 内容描述（下文）

• imageRes：弹窗顶部图标，系统媒体资源
• title：弹窗标题
• content：弹窗正文说明文字

2. 复选框配置（不再提示）

checkTips:'不再提示',// 复选框右侧文字checked:this.checked,// 绑定选中状态onCheckedChange:(checked:boolean)=>{this.checked=checked;// 状态同步}

3. 双按钮配置（AdvancedDialogV2Button）

// 主按钮（取消）primaryButton:newAdvancedDialogV2Button({content:'取消',action:()=>{}}),// 次按钮（删除，危险按钮样式）secondaryButton:newAdvancedDialogV2Button({content:'删除',role:ButtonRole.ERROR,// 危险按钮（红色）action:()=>{}})

• role: ButtonRole.ERROR：将按钮标记为删除/危险操作，显示系统红色主题
• action：按钮点击回调

4. @Builder 弹窗构造器

@BuilderdialogBuilder():void{TipsDialogV2({...});}

5. 打开弹窗逻辑

Button("打开TipsDialogV2弹出框").onClick(()=>{letuiContext:UIContext=this.getUIContext();uiContext.getPromptAction().openCustomDialog({builder:()=>{this.dialogBuilder();}});})

代码

import{TipsDialogV2,AdvancedDialogV2Button,UIContext}from'@kit.ArkUI';@Entry@ComponentV2struct Index{@Localchecked:boolean=false;@BuilderdialogBuilder():void{TipsDialogV2({imageRes:$r('sys.media.ohos_ic_public_voice'),content:'想要卸载这个APP嘛?',title:'TipsDialogV2',checkTips:'不再提示',checked:this.checked,primaryButton:newAdvancedDialogV2Button({content:'取消',action:()=>{console.info('Callback when the first button is clicked');},}),secondaryButton:newAdvancedDialogV2Button({content:'删除',role:ButtonRole.ERROR,action:()=>{console.info('Callback when the second button is clicked');}}),onCheckedChange:(checked:boolean)=>{console.info('Callback when the checkbox is clicked');this.checked=checked;}})}build(){Row(){Stack(){Column(){Button("打开TipsDialogV2弹出框").width(96).height(40).onClick(()=>{letuiContext:UIContext=this.getUIContext();uiContext.getPromptAction().openCustomDialog({builder:()=>{this.dialogBuilder();},});})}.margin({bottom:300})}.align(Alignment.Bottom).width('100%').height('100%')}.backgroundImageSize({width:'100%',height:'100%'}).height('100%')}}

运行效果如图：

点击按钮弹出:

总结

1. 上图下文固定布局：imageRes为顶部图标，是上图下文弹窗核心标识
2. 必须使用@Builder包装弹窗结构
3. 必须通过UIContext调用openCustomDialog打开
4. 按钮必须使用AdvancedDialogV2Button构造
5. ButtonRole.ERROR用于删除/卸载/退出等危险操作
6. 复选框状态必须使用@Local或@State绑定
7. 仅支持Stage 模型 + ComponentV2

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力