鸿蒙 Next Dialog 弹框

作者：auhgnixgnahz

2025-06-23
北京
本文字数：4068 字
阅读完需：约 13 分钟

弹窗的种类

模态弹窗：为强交互形式，会中断用户当前的操作流程

非模态弹窗：为弱交互形式，不会影响用户当前操作行为

本文主要记录一下

Toast 弹窗

自定义弹出框 (CustomDialog):使用上存在诸多限制，不支持动态创建也不支持动态刷新

全局自定义弹出框 (openCustomDialog)

显示一个 Toat,调用 promptActionshowToast(options: ShowToastOptions)

配置参数如下：

 promptAction.showToast({         message:'toast',         duration:1000,         bottom:10, //弹窗底部边框距离导航条的高度         showMode:0, //0 显示在应用内; 1 显示在应用之上         alignment:Alignment.Center,         offset:{dx:0,dy:0}, //在对齐方式上的偏移         backgroundColor:Color.Blue,         textColor:Color.White,         backgroundBlurStyle:BlurStyle.Thin,//背板模糊         shadow:ShadowStyle.OUTER_DEFAULT_MD,//背板阴影         enableHoverMode:false,//是否响应悬停态         hoverModeArea:HoverModeAreaType.BOTTOM_SCREEN  //响应悬停态时，弹窗的显示区域  0 上半屏 1下半屏       })

复制代码

显示一个 CustomDialog 自定义弹出框需要如下配置：

1.创建 @CustomDialog 装饰器装饰自定义弹出框

@CustomDialogstruct CustomDialogExample{  controller?: CustomDialogController  cancel: () => void = () => {  }  confirm: () => void = () => {  }   title:string =''   tip:string =''  build() {    Column({space:20}){      Text(this.title).fontSize(18)      Text(this.tip).fontSize(18)      Row(){        Button('确定').onClick(()=>{          this.confirm()        })        Button('取消').onClick(()=>{          this.cancel()        })      }.width('100%').justifyContent(FlexAlign.SpaceEvenly)    }.margin({left:20,right:20}).backgroundColor(Color.White).borderRadius(20)  }}

复制代码

2.创建构造器

dialogController?: CustomDialogController;  initControl(){    this.dialogController = new CustomDialogController({      builder: CustomDialogExample({        title:'提示',        tip:'确定要关闭吗？',        cancel: ()=> {          promptAction.showToast({            message:'取消',          })          this.dialogController?.close()        },        confirm: ()=> {  promptAction.showToast({          message:'确定',        }) }      }),      autoCancel: false,      alignment: DialogAlignment.Center,      customStyle: true,  //弹窗容器样式是否自定义    })  }

复制代码

3.点击与 onClick 使弹出框弹出

显示一个全局的 openCustomDialog 配置如下：

1.定义一个弹框内容对象，配置弹框的显示信息

//需要显示的dialog内容参数export class Params {  title: string = ""  tip: string = ""  cancel: () => void = () => {}  confirm:() => void = () => {}
  constructor(title: string, tip: string, cancel: () => void, confirm: () => void) {    this.title = title    this.tip = tip    this.cancel = cancel    this.confirm = confirm  }}

复制代码

2.定义一个全局的弹框布局视图，使用上一步的配置参数

//Dialog显示布局 显示内容 可以通过自定义参数配置@Builderexport  function  OpenCustomDialogExample(param:Params){  Column({space:20}){    Text(param.title).fontSize(18)    Text(param.tip).fontSize(18)    Row(){      Button('确定').onClick(()=>{        param.confirm()      })      Button('取消').onClick(()=>{        param.cancel()      })    }.width('100%').justifyContent(FlexAlign.SpaceEvenly)  }.margin({left:20,right:20}).backgroundColor(Color.White).borderRadius(20)}

复制代码

3.创建 ComponentContent（context,wrapBuilder(第二步定义的对象)，第一步配置的参数对象）

contentNode = new ComponentContent(context, wrapBuilder(OpenCustomDialogExample), parms);

复制代码

4.打开自定义弹出框

#完整代码：

UI 代码：

import {promptAction } from '@kit.ArkUI'import {OpenCustomDialogUtil, Params } from '../utils/DialogUtil'
@Entry@ComponentV2struct test{  dialogController?: CustomDialogController;  initControl(){    this.dialogController = new CustomDialogController({      builder: CustomDialogExample({        title:'提示',        tip:'确定要关闭吗？',        cancel: ()=> {          promptAction.showToast({            message:'取消',          })          this.dialogController?.close()        },        confirm: ()=> {  promptAction.showToast({          message:'确定',        }) }      }),      autoCancel: false,      alignment: DialogAlignment.Center,      customStyle: true,  //弹窗容器样式是否自定义    })  }  parms:Params=new Params('提示','确定要关闭openCustomDialog吗',()=>{    promptAction.showToast({      message:'取消',    })    OpenCustomDialogUtil.closeDialog()  },()=>{    promptAction.showToast({      message:'确定',    })  })  aboutToAppear(): void {    this.initControl()    //初始化OpenCustomDialog    OpenCustomDialogUtil.init(this.getUIContext(),this.parms);  }
  build() {   Column({space:20}){     Button('toast').onClick(()=>{       promptAction.showToast({         message:'toast',         duration:1000,         bottom:10, //弹窗底部边框距离导航条的高度         showMode:0, //0 显示在应用内; 1 显示在应用之上         alignment:Alignment.Center,         offset:{dx:0,dy:0}, //在对齐方式上的偏移         backgroundColor:Color.Blue,         textColor:Color.White,         backgroundBlurStyle:BlurStyle.Thin,//背板模糊         shadow:ShadowStyle.OUTER_DEFAULT_MD,//背板阴影         enableHoverMode:false,//是否响应悬停态         hoverModeArea:HoverModeAreaType.BOTTOM_SCREEN  //响应悬停态时，弹窗的显示区域  0 上半屏 1下半屏       })     })     Button('showCustomDialog').onClick(()=>{       this.dialogController?.open()     })     Button('showOpenCustomDialog').onClick(()=>{       OpenCustomDialogUtil.openDialog()     })   }.justifyContent(FlexAlign.Center).width('100%')  }}@CustomDialogstruct CustomDialogExample{  controller?: CustomDialogController  cancel: () => void = () => {  }  confirm: () => void = () => {  }   title:string =''   tip:string =''  build() {    Column({space:20}){      Text(this.title).fontSize(18)      Text(this.tip).fontSize(18)      Row(){        Button('确定').onClick(()=>{          this.confirm()        })        Button('取消').onClick(()=>{          this.cancel()        })      }.width('100%').justifyContent(FlexAlign.SpaceEvenly)    }.margin({left:20,right:20}).backgroundColor(Color.White).borderRadius(20)  }}

复制代码

全局 dialog 配置：

import { ComponentContent, promptAction } from "@kit.ArkUI"
export class OpenCustomDialogUtil{  static ctx: UIContext;  static contentNode: ComponentContent<object>;  static options: promptAction.BaseDialogOptions;
  static init(context: UIContext,parms:Params) {    OpenCustomDialogUtil.ctx = context;    OpenCustomDialogUtil.contentNode = new ComponentContent(context, wrapBuilder(OpenCustomDialogExample), parms);  }  //如果需要修改dalog的默认配置，可以修改这个参数  static setOptions(options: promptAction.BaseDialogOptions) {    OpenCustomDialogUtil.options = options;  }  static openDialog() {    if (OpenCustomDialogUtil.contentNode !== null) {      OpenCustomDialogUtil.ctx.getPromptAction().openCustomDialog(OpenCustomDialogUtil.contentNode)    }  }
  static closeDialog() {    if (OpenCustomDialogUtil.contentNode !== null) {      OpenCustomDialogUtil.ctx.getPromptAction().closeCustomDialog(OpenCustomDialogUtil.contentNode)    }  }
  static updateDialog(options: promptAction.BaseDialogOptions) {    if (OpenCustomDialogUtil.contentNode !== null) {      OpenCustomDialogUtil.ctx.getPromptAction().updateCustomDialog(OpenCustomDialogUtil.contentNode, options)    }  }}//需要显示的dialog内容参数export class Params {  title: string = ""  tip: string = ""  cancel: () => void = () => {}  confirm:() => void = () => {}
  constructor(title: string, tip: string, cancel: () => void, confirm: () => void) {    this.title = title    this.tip = tip    this.cancel = cancel    this.confirm = confirm  }}//Dialog显示布局 显示内容 可以通过自定义参数配置@Builderexport  function  OpenCustomDialogExample(param:Params){  Column({space:20}){    Text(param.title).fontSize(18)    Text(param.tip).fontSize(18)    Row(){      Button('确定').onClick(()=>{        param.confirm()      })      Button('取消').onClick(()=>{        param.cancel()      })    }.width('100%').justifyContent(FlexAlign.SpaceEvenly)  }.margin({left:20,right:20}).backgroundColor(Color.White).borderRadius(20)}</object>