鸿蒙Next Dialog弹框

弹窗的种类

模态弹窗： 为强交互形式，会中断用户当前的操作流程 非模态弹窗： 为弱交互形式，不会影响用户当前操作行为 本文主要记录一下 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装饰器装饰自定义弹出框

@CustomDialog
struct 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显示布局 显示内容 可以通过自定义参数配置
@Builder
export  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
@ComponentV2
struct 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%')
  }
}
@CustomDialog
struct 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显示布局 显示内容 可以通过自定义参数配置
@Builder
export  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)
}