HarmonyOS 如何实现半透明的遮罩效果

建议使用半模态窗口实现，可以通过maskColor属性来设置半模态页面的背景蒙层颜色。详细请参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5#bindsheet

示例参考如下：

// EntryAbility.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }

      AppStorage.setOrCreate('windowStage', windowStage);

      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

// Index.ets
import {  window } from '@kit.ArkUI';
import { SUB_WINDOW_NAME } from './ResizeWindowPage';

@Entry
@Component
struct Index {
  @State count: number = 1;
  @State windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;

  build() {
    Column() {
      Button("子窗口弹窗")
        .margin({ top: 20 })
        .onClick(() => {
          this.windowStage.createSubWindow(SUB_WINDOW_NAME, (err, windowClass) => {
            if (err.code > 0) {
              console.error(`failed to create subWindow Cause: ${err.message}`);
              return;
            }
            try {
              // 设置子窗口加载页
              windowClass.setUIContent('pages/ResizeWindowPage', () => {
                windowClass.setWindowBackgroundColor('#34000000');
              });
              // 设置子窗口左上角坐标
              // windowClass.moveWindowTo(130, 200);
              // 设置子窗口大小
              // windowClass.resize(1000, 2000);
              // 展示子窗口
              windowClass.showWindow();
              // 设置子窗口全屏化布局避让安全区
              // 设置主窗口或子窗口的布局是否为沉浸式布局，使用Promise异步回调。沉浸式布局生效时，布局不避让状态栏与导航栏，组件可能产生与其重叠的情况。非沉浸式布局生效时，布局避让状态栏与导航栏，组件不会与其重叠。
              // true表示沉浸式布局；false表示非沉浸式布局。
              windowClass.setWindowLayoutFullScreen(false);
            } catch (err) {
              console.error(`failed to create subWindow Cause:${err}`);
            }
          });
        })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

// ResizeWindowPage.ets
import { window } from '@kit.ArkUI'

export const SUB_WINDOW_NAME = "ResizeWindowPage"

@Entry
@Component
struct CustomDialogUser {
  @State windowName: string = 'ResizeWindowPage';
  @State windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
  @State subWindow: window.Window = window.findWindow('ResizeWindowPage');
  @State scrollWidth: number = 0
  @State ScrollHeight: number = 0
  @State arr: number[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 20; i++) {
      this.arr.push(i)
    }
  }

  build() {
    Column(){
      Text().height("40%")
      Stack() {
        Column() {
          Text("标题")
            .textAlign(TextAlign.Start)
            .width('100%')
            .height(56)
            .fontWeight(500)
            .fontSize(20)
            .backgroundColor(Color.Brown)
          List({ space: 20, initialIndex: 0 }) {
            ForEach(this.arr, (item: number, index) => {
              ListItem() {
                Text(item.toString())
                  .fontSize(16)
                  .fontWeight(500)
                  .width('100%')
                  .height(48)
              }
              .backgroundColor(Color.Gray)
            }, (item: number) => item.toString())
          }
          .layoutWeight(1)
          .backgroundColor(Color.Pink)
          .margin({ top: 16, bottom: 16 })
          .listDirection(Axis.Vertical) // 排列方向
          .divider({
            strokeWidth: 1,
            color: 0x05000000,
            startMargin: 24,
            endMargin: 24
          }) // 每行之间的分界线
          .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果

          Button("关闭窗口").onClick(() => {
            if (window.findWindow('ResizeWindowPage').isWindowShowing()) {
              window.findWindow('ResizeWindowPage').destroyWindow();
            }
          })
        }
        .backgroundColor(Color.Green)
        .padding({ left: 24, right: 24 })
        .borderRadius(24)
      }
      .backgroundColor(Color.Orange)
      .layoutWeight(1)
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.