HarmonyOS 鸿蒙Next中设置透明背景失效

HarmonyOS 鸿蒙Next中设置透明背景失效 CustomDialogController设置透明背景失效

4 回复

您好，CustomDialog设置透明背景可参考以下方案：

方案一：将CustomDialog的backgroundColor设置为Color.Transparent，同时将backgroundBlurStyle设置为BlurStyle.NONE（若此项不设置则自定义弹窗的背景色为白色），两种属性配合使用实现透明背景效果。

@CustomDialog
struct CustomDialogContent {
  controller: CustomDialogController;

  build() {
    Column() {
      Button('关闭').onClick(() => {
        this.controller.close();
      })
        .backgroundColor('#0a59f7');
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%');
  }
}

@Entry
@Component
struct Index {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogContent(),
    // 设置弹窗背景色为透明
    backgroundColor: Color.Transparent,
    backgroundBlurStyle: BlurStyle.NONE
  });

  build() {
    Row() {
      Button('弹窗').onClick(() => {
        this.dialogController.open();
      })
        .backgroundColor('#0a59f7')
        .margin({ top: 100 });
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .backgroundColor(0xF1F3F5);
  }
}

方案二：通过将CustomDialog的属性customStyle设置为true，就可以将弹窗容器样式的可自定义性关闭，此时的弹窗圆角为0，背景色为透明色。

@CustomDialog
struct CustomDialogContent1 {
  controller: CustomDialogController;

  build() {
    Column() {
      Button('关闭').onClick(() => {
        this.controller.close();
      })
        .backgroundColor('#0a59f7');
    };
  }
}

@Entry
@Component
struct Index1 {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogContent1(),
    customStyle: true, // 设置弹窗背景色为透明
  });

  build() {
    Row() {
      Button('弹窗').onClick(() => {
        this.dialogController.open();
      })
        .backgroundColor('#0a59f7') // 按钮颜色
        .margin({ top: 100 });
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .backgroundColor(0xF1F3F5); // 主页面背景色
  }
}

方案三：在方案二的基础上，通过将isModal设置为false，将弹窗设置为非模态弹窗，而非模态窗口无蒙层，即可实现完全透明弹窗。

@CustomDialog
struct CustomDialogContent2 {
  controller: CustomDialogController;

  build() {
    Column() {
      Button('关闭').onClick(() => {
        this.controller.close();
      })
        .backgroundColor('#0a59f7');
    };
  }
}

@Entry
@Component
struct Index2 {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogContent2(),
    customStyle: true, // 设置弹窗背景色为透明
    isModal: false
  });

  build() {
    Row() {
      Button('弹窗').onClick(() => {
        this.dialogController.open();
      })
        .backgroundColor('#0a59f7')
        .margin({ top: 100 });
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .backgroundColor(0xF1F3F5);
  }
}

【背景知识】

自定义弹窗组件CustomDialog类能够显示弹窗，并且可以自定义弹窗的样式与内容，允许用户灵活地设置弹窗的样式，布局和交互行为。

更多关于HarmonyOS 鸿蒙Next中设置透明背景失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


怎么写的?

在HarmonyOS 鸿蒙Next中，设置透明背景失效通常是因为组件默认开启了背景色绘制或未正确设置透明属性。

对于Ability或Page，需在配置文件中设置窗口背景透明windowBackground为透明色，或在代码中通过Window.setWindowBackgroundTransparent(true)实现。

对于组件，确保backgroundColor设置为透明色（如Color.Transparent），且未因父容器层级覆盖导致透明失效。检查布局层级和渲染优先级。

在HarmonyOS Next中，CustomDialogController设置透明背景失效，通常是由于默认的弹窗样式覆盖了自定义背景。

核心原因：

  • CustomDialogController 的构造参数 customDialog 中，如果未显式设置 backgroundColor 或 backgroundBlurStyle，系统会继承默认的弹窗背景（通常是半透明灰色或磨砂效果）。
  • 即使你在自定义布局的根节点（如Column或Stack）设置了backgroundColor: Color.Transparent，但由于对话框容器层级的背景优先级更高，子节点的透明效果会被覆盖。

直接解决方法： 在创建 CustomDialogController 时，显式指定对话框的backgroundColor: Color.Transparent。示例代码：

@CustomDialog
struct MyDialog {
  controller: CustomDialogController

  build() {
    Column() {
      // 你的内容
    }
    .backgroundColor(Color.Transparent) // 此处设置对容器层可能无效
  }
}

// 在调用处：
let dialog = new CustomDialogController({
  builder: MyDialog(),
  // 关键：在 CustomDialogController 的选项里设置背景透明
  backgroundColor: Color.Transparent, // 或 0x00000000
  // 如果需要完全无覆盖，可同时关闭蒙版
  maskColor: Color.Transparent
})
dialog.open()

关键点：

  1. backgroundColor 要加在 CustomDialogController 的 customDialog 属性中，而不是 build() 方法内的子组件上。
  2. 同时设置 maskColor: Color.Transparent 可以去除对话框背后的默认遮罩层，实现完全透明。

如果仍无效，检查是否使用了系统主题或全局样式覆盖，或尝试升级到最新的HarmonyOS SDK版本，早期版本存在此已知问题。

回到顶部