HarmonyOS 鸿蒙Next自定义弹窗背景如何设置透明

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next自定义弹窗背景如何设置透明

cke_169.png

代码如下

promptAction.openCustomDialog({
  builder: () => {
    this.customDialogComponent()
  },
  onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
    console.info(“reason” + JSON.stringify(dismissDialogAction.reason))
  },
  width:100,
  height:100,
  backgroundColor: Color.Transparent
}).then((dialogId: number) => {
  this.customDialogComponentId = dialogId
})

backgroundColor: Color.Transparent 不生效

而且

maskColor 和 backgroundColor设置成一样的颜色弹窗背景颜色也是会出现偏差，无法和蒙层颜色一样。

有什么好解决方案么？

Harmonyos Next教程
5 回复

终于有个靠谱的

蹲一个答案

使用ComponentContent吧，自定义全屏组件，去掉蒙层属性。想怎么改都行。

参考：https://developer.huawei.com/consumer/cn/forum/topic/0202156174901893142?fid=0109140870620153026

在HarmonyOS鸿蒙Next中，设置自定义弹窗（CustomDialog）背景透明，可以通过以下步骤实现：

  1. 使用CustomDialog组件：自定义弹窗通常通过CustomDialog组件实现，它允许开发者自定义弹窗的样式和行为。

  2. 设置相关属性：

    • maskColor：设置蒙层颜色为透明（Color.Transparent），以去除蒙层颜色。
    • backgroundColor：设置弹窗背景颜色为透明（Color.Transparent）。
    • customStyle：设置为true，以使用自定义样式。

  3. 编写代码：在代码中调用上述属性，实现背景色透明。以下是一个示例代码片段：

import { CustomDialog, Color, DialogAlignment, CustomDialogController } from '@arkui/widget';

@CustomDialog
export struct TransparentDialog {
    controller: CustomDialogController;
    build() {
        Column() {
            // 弹窗内容
            Text('这是一个透明背景的弹窗').fontSize(24).fontColor(Color.Black).textAlign(TextAlign.Center).padding(20)
        }
    }
}

// 使用自定义弹窗的页面或组件
@Entry @Component
struct MainPage {
    dialogController: CustomDialogController = new CustomDialogController({
        builder: TransparentDialog,
        alignment: DialogAlignment.Center,
        maskColor: Color.Transparent,
        backgroundColor: Color.Transparent,
        customStyle: true,
        width: '80%'
    });
    // 其余代码逻辑
}

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部