HarmonyOS 实现toast带有图标的提示效果，使用自定义promptAction.openCustomDialog 怎么让背景半透明？

Question

1.CustomDialogUI的ui已经设置成了透明度为0了 但是 还有原本弹框的白色底色，怎么把底色去掉

2.如果底色去不掉 怎么怎么实现 toast的效果 但是要带有图标，（成功失败的提示图标）

@Builder
CustomDialogUI(type: String) {
  Column() {
    if (type === 'success') {
      Image($r('app.media.scanSuccess'))
        .width(DpUtils.ratio(51))
    } else if (type === 'fail') {
      Image($r('app.media.scanFail'))
        .width(DpUtils.ratio(51))
    } else {
      Image($r('app.media.scanWarning'))
        .width(DpUtils.ratio(51))
    }
    Text(type === 'success' ? '扫码成功' : type === 'fail' ? "扫码失败，请重试" : '暂不支持识别该码')
      .width('100%')
      .textAlign(TextAlign.Center)
      .margin({
        top: DpUtils.ratio(4)
      })
      .fontSize(DpUtils.ratio(15))
      .lineHeight(DpUtils.ratio(21))
      .fontColor(Color.White)
  }
  .backgroundColor("rgba(255, 100, 255, 0)")
  // .backgroundColor(Color.Red)
  .width(DpUtils.ratio(139))
  .height(DpUtils.ratio(110))
  .padding({
    top: DpUtils.ratio(18)
  })

}

//展示自定义提示
showCustomDialog = (type: string) => {
  try {
    promptAction.openCustomDialog({
      builder: () => {
        this.CustomDialogUI(type)
      },
      showInSubWindow: false,
      backgroundColor: Color.Transparent,
      cornerRadius: DpUtils.ratio(10),
      width:DpUtils.ratio(139),
      height:DpUtils.ratio(110),
      isModal:false,
    })
  } catch (error) {
    hilog.error(0x0001, this.TAG, 'showToast error: %{public}s ', JSON.stringify(error));
  }
}

Answer 1

参考示例：

import { ComponentContent } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Parent {
  aboutToAppear(): void {
    //存储全局UIContext 变量
    GlobalContext.getContext().setObject('UIContext', this.getUIContext());
  }
  private customDialog = new CustomDialog()

  build() {
    Column() {
      Button("click").onClick(()=>{
        this.customDialog.openDialog()
      }).width(100).height(100)
    }
  }
}

class CustomDialog{
  openDialog(){
    let uiContext =  GlobalContext.getContext().getObject('UIContext') as UIContext
    if (uiContext) {
      let promptAction = uiContext.getPromptAction();
      let contentNode = new ComponentContent((uiContext as UIContext), wrapBuilder(buildText));
      try {
        promptAction.openCustomDialog(contentNode,{
          isModal:false,
        });
      } catch (error) {
        let message = (error as BusinessError).message;
        let code = (error as BusinessError).code;
        console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
      };
    }
  }
}

@Builder
function buildText() {
  Column() {
    Image($r('app.media.app_icon')).width(50).height(50)
    Text('dialog')
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .fontColor(Color.White)
      .margin({bottom: 36})
  }.backgroundColor(Color.Black).width(100).height(100)
}

export class GlobalContext {
  private constructor() { }
  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    console.log(typeof (this._objects.get(value)))
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}