HarmonyOS鸿蒙Next中全局@Builder function时，组件无渲染问题，求大佬帮忙解决

HarmonyOS鸿蒙Next中全局@Builder function时，组件无渲染问题，求大佬帮忙解决

自定义弹窗基类

import { ComponentContent, PromptAction, UIContext } from "@kit.ArkUI"
import { BusinessError } from "@kit.BasicServicesKit"
import { JSON } from "@kit.ArkTS"

export interface DialogButtonOptions {
  text?: ResourceStr
  fontColor?: ResourceStr
  onClick?: () => void
}

export interface BaseOptions {
  autoCancel?: boolean
  message?: ResourceStr
  onDismiss?: () => void
}

export abstract class BaseDialog<T extends BaseOptions> {
  node: ComponentContent<T> | null = null
  prompt: PromptAction | null = null

  protected abstract withCompContent(uiContext: UIContext, options: T): ComponentContent<T>

  protected openDialog(uiContext: UIContext, options: T) {
    this.prompt = uiContext.getPromptAction()
    this.node = this.withCompContent(uiContext, options)
    this.prompt.openCustomDialog(this.node, {
      autoCancel: options.autoCancel ?? false,
      onWillDismiss: (action) => {
        if (options.autoCancel === true) {
          action.dismiss()
        }
      },
      onWillDisappear: () => {
        if (options.onDismiss) {
          options.onDismiss()
        }
      }
    })
  }

  openOptions(uiContext: UIContext | undefined | null, options: T) {
    if (uiContext) {
      this.openDialog(uiContext, options)
    }
  }

  close() {
    try {
      if (this.node && this.prompt) {
        this.prompt.closeCustomDialog(this.node)
      }
    }
    catch (error1) {
      try {
        let message = (error1 as BusinessError).message
        let code = (error1 as BusinessError).code
        console.error(`Close loading dialog args error1 code is ${code}, message is ${message}`)
      }
      catch (error2) {
        console.error(`Close loading dialog args error1 code is ${JSON.stringify(error1)}`)
        console.error(`Close loading dialog args error2 code is ${JSON.stringify(error2)}`)
      }
    }
    finally {
      this.node = null
      this.prompt = null
    }
  }
}

export function dialogPadding(): Length | Padding | LocalizedPadding {
  return {
    left: 16,
    right: 16,
    top: 24,
    bottom: 20
  }
}

自定义通用弹窗

import { ComponentContent, UIContext } from "@kit.ArkUI"
import { BaseDialog, BaseOptions, DialogButtonOptions, dialogPadding } from "./BaseDialog"

export interface CommonOptions extends BaseOptions {
  title?: ResourceStr
  cancelOptions?: DialogButtonOptions
  confirmOptions?: DialogButtonOptions
}

export class CommonDialog extends BaseDialog<CommonOptions> {
  protected withCompContent(uiContext: UIContext, options: CommonOptions): ComponentContent<CommonOptions> {
    return new ComponentContent<BaseOptions>(uiContext, wrapBuilder(buildDialog), options, { nestingBuilderSupported: false })
  }
}

[@Builder](/user/Builder)
function buildDialog(params: CommonOptions) {
  Column({ space: 16 }) {
    if (params.title) {
      Text(params.title)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
    }
    if (params.message) {
      Text(params.message)
        .fontColor("#191919")
    }
    Row() {
      if (params.confirmOptions && params.cancelOptions) {
        cancelBuilder(params)
        Text("|").margin({ left: 8, right: 8 })
        buttonBuilder(params.confirmOptions) // buttonBuilder 调用无组件输出，只能调用 confirmBuilder
      }
      else {
        if (params.cancelOptions) {
          cancelBuilder(params)
        }
        if (params.confirmOptions) {
          // confirmBuilder(params)
          buttonBuilder(params.confirmOptions) // buttonBuilder 调用无组件输出，只能调用 confirmBuilder
        }
      }
    }
  }
  .padding(dialogPadding())
  .backgroundColor(Color.White)
  .flexShrink(1)
  .borderRadius(8)
  .width('88%')
  .constraintSize({ maxWidth: 300 })
  .justifyContent(FlexAlign.Center)
}

[@Builder](/user/Builder)
function confirmBuilder(params: CommonOptions) {
  Text(params.confirmOptions!!.text)
    .fontColor(params.confirmOptions!!.fontColor)
    .fontWeight(FontWeight.Bold)
    .onClick(params.confirmOptions!!.onClick)
    .layoutWeight(1)
    .textAlign(TextAlign.Center)
}

[@Builder](/user/Builder)
function buttonBuilder(params: DialogButtonOptions | undefined) {
  Text(params!!.text)
    .fontColor(params!!.fontColor)
    .fontWeight(FontWeight.Bold)
    .onClick(params!!.onClick)
    .layoutWeight(1)
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
}

[@Builder](/user/Builder)
function cancelBuilder(params: CommonOptions) {
  Text(params.cancelOptions!!.text)
    .fontColor(params.cancelOptions!!.fontColor)
    .fontWeight(FontWeight.Bold)
    .onClick(params.cancelOptions!!.onClick)
    .textAlign(TextAlign.Center)
    .layoutWeight(1)
}

调用代码如下：

let dialog = new CommonDialog()
dialog.openOptions(this.getUIContext(), {
  autoCancel: true,
  title: "确定重启吗？",
  message: `点击确定将会进行重启App`,
  cancelOptions: {
    text: "取消",
    fontColor: "#1658D9",
    onClick: () => {
      dialog.close()
    }
  },
  confirmOptions: {
    text: "确定",
    fontColor: "#59BB6B",
    onClick: () => {
      dialog.close()
      PasteUtils.copyTextAndToast(DeveloperConfig.WE_CHAT_ID, "复制成功")
    }
  }
})

在通用弹窗里面，因为按钮样式是通用的，所以我准备封装复用，然后发现封装后的 buttonBuilder组件没有渲染出来。传入CommonOptions的参数可以渲染，但是传入CommonOptions.ButtonDialogOptions的参数就失败了，求姐 ~

开发环境是API15，Mate60Pro。 DevEco Studio 5.0.3 Release

Build #DS-233.14475.28.36.5090300

Build Version: 5.0.9.300, built on March 13, 2025

Runtime version: 17.0.12+1-b1087.25 amd64

VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.

Windows 11.0

GC: G1 Young Generation, G1 Old Generation

Memory: 4026M

Cores: 22

Registry:

idea.plugins.compatible.build=IC-233.14475.28

Non-Bundled Plugins:

com.intellij.ideolog (222.3.2.0)

String Manipulation (9.15.0)

org.intellij.gitee (2023.3.4)