HarmonyOS 鸿蒙Next CustomDialogController支持背景Transparent吗？

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next CustomDialogController支持背景Transparent吗？

@Entry({
  routeName: "QrScanPage"
})
@Component
export struct QrScanPage {
  scannerController: ScannerController = new ScannerController()
  @State actionList: ActionListDTO[] = []
  actionListDialogController: CustomDialogController = new CustomDialogController({
    builder: CustomContentDialog({
      contentAreaPadding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      },
      contentBuilder: () => {
        this.buildContent();
      },
    }),
  })

  @Builder
  buildContent(): void {
    Column() {
      Grid() {
        ForEach(this.actionList, (item: ActionListDTO) => {
          GridItem() {
            this.ActionItem(item);
          }
        }, (item: ActionListDTO) => item.targetAddress)
      }
      .columnsGap(20)
      .rowsGap(20)
      .enableScrollInteraction(false)
      .columnsTemplate('1fr 1fr 1fr')
      .margin(14)
      .width(CommonConstants.FULL_PERCENT)
      .height(CommonConstants.FORTY_PERCENT)
    }
    .backgroundColor(Color.Transparent)
  }

  @Builder
  ActionItem(item: ActionListDTO) {
    Column() {
      Image(item.appIcon ? item.appIcon : $r("app.media.startIcon"))
        .width(36)
        .height(36)
      Text(item.appName).fontSize(12).margin({ top: 10 })
      Text(item.actionName)
        .fontSize(12)
        .margin({ top: 10 })
        .width(CommonConstants.FULL_PERCENT)
        .backgroundColor($r("app.color.accent_color"))
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
    }
    .onClick(() => {
      // SubAppManager.gotoSubApp(item as BaseApp)
    })
  }

  build() {
    Navigation() {
      Column() {
        Scanner({
          controller: this.scannerController,
          cornerLineShow: false, // 隐藏四个角
          scanLineShow: false, // 隐藏扫描线
          // albumsShow: false, // 隐藏图库按钮和文字
          // lightShow: false, // 隐藏闪光点按钮和文字
          // tipsShow: false, // 隐藏提示词
          maskColor: Color.Transparent, // 蒙层透明
          albumsIcon: $r('app.media.icon_select_img'),
          albumsText: "选择照片",
          lightCloseIcon: $r('app.media.icon_light_off'),
          lightOpenIcon: $r('app.media.icon_light_on'),
          lightOpenText: "开启手电",
          lightCloseText: "关闭手电",
          onScanResult: async (code: ResultState, value: string) => {
            if (code == ResultState.Success) {
              // promptAction.showToast({ message: value })
              if (StrUtil.isNotEmpty(value)) {
                // 首页先看是否url，如是直接打开，如否则调接口
                try {
                  let checkUrl = url.URL.parseURL(value)
                  let urlModel: UrlModel = { url: checkUrl.toString() }
                  CommonUtils.openWebView(urlModel.url)
                } catch (e) {
                  //解密返回
                  let responseEntity: ResponseEntity<Record<string, string>> = await authQrCodeDecrypt(value)
                  let actionModel: ActionModel = JSONUtil.jsonToBean(ActionModel, JSON.stringify(responseEntity.data))
                  if (StrUtil.isNotNull(actionModel.nullReason)) {
                    ToastUtil.showToast(actionModel.nullReason)
                  }
                  if (ArrayUtil.isNotEmpty(actionModel.actionList)) {
                    this.actionList = actionModel.actionList
                    this.scannerController.releaseScan()
                    this.actionListDialogController.open()
                  } else {
                    this.scannerController.startScan()
                  }
                }
              }
            }
          },
          onCameraReject: () => {
            promptAction.showToast({ message: '摄像头权限被拒绝' })
          }
        })
          .width(CommonConstants.FULL_PERCENT)
          .height(CommonConstants.NINETY_PERCENT)
      }
      .width(CommonConstants.FULL_PERCENT)
      .height(CommonConstants.FULL_PERCENT)
    }
    .size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
    .title("扫描二维码")
    .titleMode(NavigationTitleMode.Mini)
    .margin({ top: CommonUtils.getStatusBarHeightMarginTop() })
  }
}

在contentBuilder中最外层Column加入.backgroundColor(Color.Transparent)，实际还是默认白色

Harmonyos Next教程
2 回复 
自定义弹窗想要背景透明需要外部设置参数 customStyle: true 内部弹窗颜色设置为透明backgroundColor(Color.Transparent) 即可

demo如下：
[@CustomDialog](/user/CustomDialog)
[@Component](/user/Component)
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column() {
      Text("测试一下弹窗").width(100).height(100).backgroundColor(Color.Orange)
    }.borderRadius(10).backgroundColor(Color.Transparent).height(300)

    // 如果需要使用border属性或cornerRadius属性，请和borderRadius属性一起使用。
  }
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct CustomDialogUser {
  [@State](/user/State) inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    cancel: this.exitApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: true,
    cornerRadius: 10,
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  exitApp() {
    console.info('Click the callback in the blank area')
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

HarmonyOS 鸿蒙Next CustomDialogController支持背景Transparent。

在HarmonyOS中，CustomDialog组件允许开发者自定义弹窗的样式和行为。对于CustomDialog的背景颜色，是可以通过设置其相关属性来实现的。特别是maskColor属性，它决定了弹窗蒙层的颜色。如果将maskColor设置为Color.Transparent（透明色），那么就可以达到去除蒙层颜色或使背景透明的效果。

然而，需要注意的是，这里所说的透明效果是指蒙层的透明，而不是整个弹窗背景的透明。如果希望弹窗的背景（即弹窗内容区域的背景）也透明，那么可能需要通过其他方式来实现，比如设置弹窗内容区域的背景颜色为透明，并调整其他相关属性以确保透明效果符合预期。

如果在实际操作中遇到问题，或者需要更详细的指导，建议查阅HarmonyOS的官方文档或相关开发资料。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部