HarmonyOS 鸿蒙Next中底部导航条怎么去除

要完全去除底部导航条并消除H5页面的底部安全区，需结合窗口配置和Web组件适配两种方式：

1. 隐藏系统导航条（完全去除导航条）

使用 setWindowSystemBarEnable 接口直接隐藏导航条（包括底部导航条）：

import window from '@ohos.window';
import common from '@ohos.app.ability.common';

// 获取当前窗口实例（如在UIAbility的onWindowStageCreate中）
let windowClass = await window.getLastWindow(context);
// 隐藏状态栏和导航栏（传入空数组表示全部隐藏）
await windowClass.setWindowSystemBarEnable([]);

• 作用：直接隐藏系统导航条（包括底部导航条），使其不显示。
• 注意：此操作会完全移除导航条，用户无法通过系统导航操作（如返回、主页），需在应用中提供替代交互方式。

2. 设置沉浸式布局（避免安全区避让）

通过 setWindowLayoutFullScreen(true) 设置窗口为沉浸式布局，使内容延伸至非安全区域（包括底部）：

// 设置窗口为沉浸式布局（内容扩展至状态栏/导航栏区域）
await windowClass.setWindowLayoutFullScreen(true);

• 作用：取消系统默认的安全区避让行为，允许内容覆盖底部导航条区域。
• 注意：此方法需配合 Web组件的安全区适配（见下文）才能完全消除H5页面的底部安全区。

3. Web组件安全区适配（针对H5页面）

即使窗口已沉浸式布局，Web组件默认仍会保留安全区避让（如底部安全区）。需通过以下方式去除：

• 方法一：使用 avoidVisibleViewportBottom(0)
  设置Web组件底部避让高度为0：

// WebviewController示例
webviewController.avoidVisibleViewportBottom(0); // 避让高度设为0

• 方法二：通过HTML的viewport-fit属性
  在H5页面的<meta>标签中设置viewport-fit=cover，使网页内容覆盖整个视口（包括非安全区）：

<meta name="viewport" content="viewport-fit=cover">

• 方法三：使用CSS env()函数（可选）
  若仍需部分避让，可通过CSS动态调整内容位置（但高度设为0时无需此操作）：

body {
  padding-bottom: env(safe-area-inset-bottom, 0px); /* 可选：安全区高度设为0 */
}

完整代码示例（结合窗口和Web配置）

// 在UIAbility或页面中设置窗口
async setImmersionMode() {
  let windowClass = await window.getLastWindow(this.context);
  // 1. 隐藏导航条
  await windowClass.setWindowSystemBarEnable([]);
  // 2. 设置沉浸式布局
  await windowClass.setWindowLayoutFullScreen(true);
}

// Web组件中配置避让
@Entry
@Component
struct WebPage {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ controller: this.controller })
        .onReady(() => {
          // 3. 设置Web组件底部避让高度为0
          this.controller.avoidVisibleViewportBottom(0);
        })
    }
  }
}

注意事项

1. 兼容性：

   • setWindowSystemBarEnable 和 setWindowLayoutFullScreen 从API version 10开始支持全功能（文档中多次提及）。
   • avoidVisibleViewportBottom 是Web组件的专用接口（见《arkts-apis-webview-WebviewController.md》）。

2. 效果验证：

   • 隐藏导航条后，底部导航条完全消失。
   • 沉浸式布局 + Web避让高度设为0后，H5页面底部安全区高度应为0。

3. 替代方案：
   若不想完全隐藏导航条（仅去除安全区），可改用：

// 仅设置沉浸式布局（保留导航条显示，但内容扩展至其下方）
await windowClass.setWindowLayoutFullScreen(true);
// 并设置导航栏背景透明
await windowClass.setWindowSystemBarProperties({
  navigationBarColor: '#00000000', // 透明
});