【鸿蒙ArkUI实战开发】基于promptAction全局弹窗

往期知识点整理

• 【鸿蒙UI实战开发】基于List和Scroller由简单到复杂列表布局开发实践
• 【鸿蒙UI实战开发】基于原生能力的键盘控制
• 【鸿蒙UI实战开发】基于ArkUI现有能力实现自定义弹窗封装方案
• 【鸿蒙ArkUI实战】基于ImageKit对图片进行处理
• 【鸿蒙ArkUI开发】基于ArkUI的验证码实现
• 【鸿蒙ArkUI实战开发】基于原生能力的深色模式适配
• 【鸿蒙ArkUI实战开发】基于ArkUI的动效能力
• 【鸿蒙ArkUI实战开发】基于ArkUI的透明页面效果
• 【鸿蒙ArkUI实战开发】基于Search组件实现搜索栏
• 【鸿蒙ArkUI实战开发】基于Swiper的页面布局
• 【鸿蒙ArkUI实战开发】基于promptAction全局弹窗
• 持续更新中……

场景一：创建并显示全局自定义弹窗

方案

可以使用openCustomDialog接口， 创建并弹出dialogContent对应的自定义弹窗，使用Promise异步回调。

创建Params类方便开发者进行传参的，开发者可以在@Builder里自定义组件的内容，宽度跟随子节点自适应，圆角为0，弹窗背景色为透明色；

let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message))

上述代码中uiContext代表上下文，wrapBuilder(buildText)代表自定义节点，new Params(this.message)代表传参。

核心代码

import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";

class Params {
  text: string = ""
  constructor(text: string) {
    this.text = text;
  }
}//传参

@Builder
function buildText(params: Params) {
  Row(){
    Column() {
      Text(params.text)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin({bottom: 36})
    }.backgroundColor('#FFF0F0F0')
  }
  .height("100%")
} //自定义组件的内容

@Entry
@Component
struct Index {
  @State message: string = "显示TOAST"

  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message))