鸿蒙开发：wrapBuilder传递参数

思路参考链接：mp.weixin.qq.com/s/GzbZs6OPb...

我们先创建好主页面，将自定义的@Builder写好

scss 复制代码

// PageIndex.ets

import { DialogUtils } from './DialogUtils'

// 自定义的页面 Builder
@Builder
function messageView()  {
  Column({ space: 10 }) {
    Text("自定义的文本")
      .width("100%")
      .fontColor(Color.White)
      .textAlign(TextAlign.Center)
      .margin({ top: 20, bottom: 20 })
      .backgroundColor(getRandomTransparentOfRgba())
      Row() {
        Image($r("app.media.app_icon"))
          .size({ width: 50 })
          .objectFit(ImageFit.Contain)
      }
      .width("100%")
      .justifyContent(FlexAlign.Center)
      .backgroundColor(getRandomTransparentOfRgba())

    Row() {
      Image($r("app.media.app_icon"))
        .size({ width: 50 })
        .objectFit(ImageFit.Contain)
    }
    .width("100%")
    .justifyContent(FlexAlign.Center)
    .backgroundColor(getRandomTransparentOfRgba())

    Blank()
      .height(10)
  }
}

function getRandomTransparentOfRgba() {
  const randomValue = () => Math.floor(Math.random() * 256);
  const r = randomValue();
  const g = randomValue();
  const b = randomValue();
  return `rgba(${r}, ${g}, ${b}, 0.5)`;
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button("点击")
        .onClick(() => {
        // 这里就是具体类功能实现的地方
          DialogUtils.get()
            .showDialog(this.getUIContext(), {
              title: "标题来咯~",
              messageView: wrapBuilder(messageView),
              messageData: "测试数据"
            })
        })
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

然后是我们的功能类，可以实现的功能如下

可以传入自定义的@Builder
自定义的titile

typescript 复制代码

// DialogUtils.ets

import { ComponentContent } from "@kit.ArkUI"
import { DialogAttribute } from "./DialogAttribute"

export class DialogUtils {
  private constructor() {
  }

  private static mDialogUtils: DialogUtils

  public static get() {
    if (DialogUtils.mDialogUtils == undefined) {
      DialogUtils.mDialogUtils = new DialogUtils()
    }
    return DialogUtils.mDialogUtils
  }

  showDialog(context: UIContext, dialogAttribute?: DialogAttribute) {
    if (dialogAttribute == undefined) {
      dialogAttribute = new DialogAttribute()
    }
    this.show(context, dialogAttribute)
  }

  private show(context: UIContext, object: Object) {
    let dView = wrapBuilder<Object[]>(dialogView)
    let dialogContent: ComponentContent<Object> = new ComponentContent(context, dView, object)
    context.getPromptAction().openCustomDialog(dialogContent)
  }
}

@Builder
function dialogView(dialogAttribute?: DialogAttribute) {
  Column() {
    Text(dialogAttribute?.title)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
      .margin({ top: 10 })

    Text(dialogAttribute?.messageData?.toString())
      .margin({ top: 10, bottom: 10 })
      .fontColor(Color.Red)

    //message是一个组件视图
    if (dialogAttribute?.messageView != undefined) {
      dialogAttribute?.messageView.builder()
    }

    Row() {
      Text("取消")
        .height(40)
        .textAlign(TextAlign.Center)
        .layoutWeight(1)
      Text("确定")
        .height(40)
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
    }.width("100%")
  }.width("80%")
  .backgroundColor(Color.White)
  .borderRadius(10)
}

这个类的调用也很简单,如下调用

kotlin 复制代码

          DialogUtils.get()
            .showDialog(this.getUIContext(), {
              title: "标题来咯~",
              messageView: wrapBuilder(messageView),
              messageData: "测试数据"
            })

需要补充数据结构定义如下；

typescript 复制代码

// DialogAttribute.ets
export class DialogAttribute {
  title?: string
  messageView?: WrappedBuilder<Object[]>
  messageData?: object | string
}

以上就是关于如何实现一个自定义布局的全局范围弹窗

实现了基本的自定义UI，实现数据的传递

那么可以思考一下

如果是点击确认/取消，我们应该如何实现呢？