预览窗口顶部和底部出现白边
=============

**问题现象**

预览窗口顶部和底部出现白边。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/1d/v3/ip10c5GeTfeHaEWN2p415Q/zh-cn_image_0000002654837771.png?HW-CC-KV=V1&HW-CC-Date=20260709T134347Z&HW-CC-Expire=86400&HW-CC-Sign=B49C08EC6C9BF9C73D9F0F6C742CB6C15483CFF1570C6F4921B5B3A0E755CF8B)

**解决措施**

这是应用了沉浸式的特性，在沉浸式布局中，状态栏和导航条区域称为避让区，其余区域称为安全区。在默认情况下，开发者的组件被布局在安全区内。如果开发者希望将页面布局应用到全屏窗口，可以采用如下两种方式：

*   方法一：预览场景下，使用[expandSafeArea()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-expand-safe-area#expandsafearea)扩展安全区域属性。
    
    _// Index.ets_
    @Entry
    @Component
    struct Index {
      @State message: string = 'Hello World';
    
    
      build() {
        RelativeContainer() {
          Text(this.message)
            .id('HelloWorld')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .alignRules({
              center: { anchor: '\_\_container\_\_', align: VerticalAlign.Center },
              middle: { anchor: '\_\_container\_\_', align: HorizontalAlign.Center }
            })
        }
        .height('100%')
        .width('100%')
        .backgroundColor('#008000')
        .expandSafeArea(\[SafeAreaType.SYSTEM\])
      }
    }
    

*   方法二：预览调试时，调用[setWindowLayoutFullScreen()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setwindowlayoutfullscreen9)接口设置窗口全屏。
    
    _// EntryAbility.ets_
    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) => {
        // ...
      });
      windowStage.getMainWindow((err, data) => {
        if (!err.code) {
          data.setWindowLayoutFullScreen(true)
        }
      });
    }
    

**参考链接**

[开发应用沉浸式效果](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-develop-apply-immersive-effects)