鸿蒙Next系统如何覆盖上面和下面的空白区域

在使用鸿蒙Next系统时，发现屏幕上方和下方有空白区域无法充分利用，影响整体显示效果。请问如何调整设置或通过其他方法让内容覆盖这些空白区域？是否有相关的系统选项或开发者模式可以解决这个问题？谢谢！

2 回复

鸿蒙Next系统可以通过以下方式覆盖屏幕上下空白区域：

  1. 使用全屏布局属性： 在XML中设置fitWindows="true"或代码中调用setFitsSystemWindows(true)，让内容延伸到状态栏和导航栏区域。

  2. 沉浸式状态栏：

  • 调用Window.setStatusBarColor(Color.TRANSPARENT)
  • 在主题中设置<item name="android:windowTranslucentStatus">true</item>
  1. 隐藏导航栏：
getWindow().getDecorView().setSystemUiVisibility(
    View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
);

  1. 使用鸿蒙专用API： 通过OHOSAbilityPackage获取窗口管理器，调用setLayoutInDisplayCutoutMode()处理刘海屏适配。

  2. 响应式布局： 使用DisplayMetrics获取实际可用区域，通过约束布局动态调整界面元素位置。

注意：全屏显示时需要处理好与系统手势操作的冲突，建议保留必要的安全边距。

更多关于鸿蒙Next系统如何覆盖上面和下面的空白区域的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next系统中，可以通过以下方式覆盖屏幕上方和下方的空白区域：

1. 设置全屏显示

// 在EntryAbility.ts中设置全屏
import window from '@ohos.window';

async function setFullScreen(windowClass: window.Window) {
  await windowClass.setFullScreen(true);
}

2. 使用窗口属性配置

// 在页面中设置窗口属性
import window from '@ohos.window';
import common from '@ohos.app.ability.common';

let context = getContext(this) as common.UIAbilityContext;
window.getLastWindow(context).then((windowClass) => {
  // 隐藏状态栏和导航栏
  windowClass.setWindowLayoutFullScreen(true);
  windowClass.setWindowSystemBarEnable(['status', 'navigation']);
});

3. 在config.json中配置

{
  "module": {
    "abilities": [
      {
        "window": {
          "designWidth": 720,
          "autoDesignWidth": false,
          "fullScreen": true
        }
      }
    ]
  }
}

4. 使用安全区域适配

// 使用安全区域API避开系统栏
import display from '@ohos.display';

// 获取安全区域
let display = display.getDefaultDisplaySync();
let safeArea = display.cutout?.safeArea;

主要方法总结：

  • setFullScreen(): 完全全屏，隐藏所有系统栏
  • setWindowLayoutFullScreen(): 布局全屏，内容延伸到系统栏后面
  • 安全区域适配: 确保重要内容不被系统栏遮挡

选择哪种方式取决于具体需求：如果需要完全沉浸式体验，使用全屏模式；如果需要确保内容不被遮挡，使用安全区域适配。

回到顶部