# 如何扩展安全区域实现全屏遮罩

#### 问题现象

如何结合安全区域扩展与全屏遮罩组件实现沉浸式界面？

#### 效果预览

#### 背景知识

*   安全区域是指页面的显示区域，默认情况下开发者开发的界面都布局在安全区域内，不与系统设置的避让区比如状态栏、导航栏区域重叠。通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制区域至安全区外。
*   CustomDialogController是HarmonyOS提供的弹窗控制器，用于动态管理自定义弹窗的显示、样式和交互逻辑。

#### 解决方案

调用expandSafeArea将页面内容扩展至系统安全区域外部，同时，CustomDialogController会自动为弹窗添加半透明遮罩层，用于阻断用户与底层内容的交互，通过CustomDialogController弹出对话框，实现遮罩效果。

```
@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController;

  build() {
    Column() {
      Text('遮罩层')
        .fontColor(Color.White)
        .fontSize(30);
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .borderRadius(10)
    .onClick(() => {
      this.controller?.close();
    });
  }
}

@Entry
@Component
struct CustomDialogMask {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
    customStyle: true
  });

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open();
        });
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffe2eeff')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]);
  }
}
```