HarmonyOS 鸿蒙Next 全屏时指定页面隐藏状态栏导航栏及底部导航条

HarmonyOS 鸿蒙Next 全屏时指定页面隐藏状态栏导航栏及底部导航条 全屏时隐藏状态栏,导航栏,底部导航条.目前是所有页面都隐藏了. 现在希望在指定页面隐藏,在其他页面显示

export default class EntryAbility extends UIAbility {

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
    Logger.info('%{public}s', 'Ability onCreate');
    CrashUtil.onError()
  }

  onDestroy() {
    Logger.info('%{public}s', 'Ability onDestroy');
    CrashUtil.offError()
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    Logger.info('%{public}s', 'Ability onWindowStageCreate');
    AppUtil.init(this.context, windowStage)
    windowStage.loadContent('pages/SplashPage', (err, data) => {
      if (err.code) {
        Logger.error('Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      Logger.info('Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });

    //获取主窗口
    let windowClass: window.Window = windowStage.getMainWindowSync()

    //1.设置窗口全屏
    let isLayoutFullScreen = true
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
      console.info('Succeeded in setting the window layout to full-screen mode.');
    })
    .catch((err: BusinessError) => {
      Logger.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
    })

    //todo 待处理,进入云机后的页面才需要设置这个,其他页面默认显示状态栏和导航条
    /** 设置主窗口全屏模式时导航栏、状态栏、底部导航条的显示和隐藏. 为了适配云端的手机,这里隐藏导航条 */
    windowClass.setSpecificSystemBarEnabled('status', false)
    .then(() => {
      console.info('Succeeded in setting the status bar to be invisible.');
    })
    .catch((err: BusinessError) => {
      console.error(`Failed to set the status bar to be invisible. Code is ${err.code}, message is ${err.message}`);
    });

    //2、获取布局避让遮挡区域
    let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR
    let avoidArea = windowClass.getWindowAvoidArea(type)
    let bottomRectHeight = avoidArea.bottomRect.height
    AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight)

  }

  onWindowStageDestroy() {
    // Main window is destroyed, release UI related resources
    Logger.info('%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground() {
    // Ability has brought to foreground
    Logger.info('%{public}s', 'Ability onForeground');
  }

  onBackground() {
    // Ability has back to background
    Logger.info('%{public}s', 'Ability onBackground');
  }
}

更多关于HarmonyOS 鸿蒙Next 全屏时指定页面隐藏状态栏导航栏及底部导航条的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在指定页面获取window设置全屏，在页面生命周期里控制显示隐藏

更多关于HarmonyOS 鸿蒙Next 全屏时指定页面隐藏状态栏导航栏及底部导航条的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，若要在全屏模式下隐藏指定页面的状态栏、导航栏及底部导航条，可以通过修改页面布局和窗口属性来实现。以下是一种可能的方法：

  1. 修改页面布局文件：确保页面布局文件中没有预留空间给状态栏、导航栏等系统UI元素。这通常意味着你的布局应该占据整个屏幕空间。

  2. 设置窗口属性：在页面的代码逻辑中，可以通过设置窗口属性来隐藏这些UI元素。具体实现依赖于你所使用的开发框架和编程语言（如ArkUI的JS或TS版本，或ArkUI的eTS版本）。

    • 对于ArkUI的JS/TS版本，可以在页面加载时调用系统API来设置全屏模式并隐藏状态栏、导航栏等。
    • 对于ArkUI的eTS版本，也有相应的API可以设置这些属性。

  3. 确保权限和配置正确：检查应用是否有权限修改系统UI设置，并在manifest文件中正确配置相关权限。

示例代码（伪代码，具体实现需根据实际开发框架调整）：

// 假设使用ArkUI eTS版本
@Entry
@Component
struct MyPage {
  @State isFullScreen: boolean = false;

  build() {
    system.window.setStatusBarVisible(this.isFullScreen);
    system.window.setNavigationBarVisible(this.isFullScreen);
    // 假设有API可以设置底部导航条可见性
    // system.window.setBottomNavigationBarVisible(this.isFullScreen);
    
    // 页面布局...
  }

  onPageShow() {
    this.isFullScreen = true; // 设置全屏并隐藏UI元素
  }
}

如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部