输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQDevEco Studio界面预览预览窗口顶部和底部出现白边

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

更新时间: 2026-06-26 07:47

问题现象

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

解决措施

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

  • 方法一：预览场景下，使用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()接口设置窗口全屏。
    // 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)
    }
  });
}

参考链接

开发应用沉浸式效果

预览报错“Node service error detected.Reinstall DevEco Studio to fix the error. ”
DevEco无法执行Previewer，报错“This module is referencing one or more HSPs and cannot be previewed.”怎么处理
相关推荐
文档应用挂起或退出时，页面顶部闪现白条
文档悬浮窗切换全屏，底部留白
文档Progress组件起点与终点样式重叠及白边问题
文档悬浮窗模式，应用页面未避让顶部窗口控制条
文档深色模式下页面白屏
文档窗口沉浸式
文档应用无法完全最大化
文档开发应用沉浸式效果
文档Web组件加载某个页面，出现白屏、页面显示不出来，如何解决和定位
文档页面和导航条区域的色调不一致
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词