HarmonyOS 鸿蒙Next 沉浸式状态栏最佳实践

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 沉浸式状态栏最佳实践

目前只能在ability设置全屏， 然后在各page中按需求去避让布局。在page中怎么直接设置全屏或非全屏呢

Harmonyos Next教程
2 回复
可以用一下代码来在page中设置全屏或非全屏 
// 页面生命周期：当页面显示时
  onPageShow() {
    window.getLastWindow(getContext(this), (err, win) => {
      // 获取当前窗口的属性
      let prop: window.WindowProperties = win.getWindowProperties();
      // 打印当前窗口属性
      console.log(JSON.stringify(prop));
      win.setWindowSystemBarEnable([])
    })
  }
  // 页面生命周期：当页面隐藏时
  onPageHide() {
    window.getLastWindow(getContext(this), (err, win) => {
      // 设置当前窗口状态栏和导航栏为显示
      win.setWindowSystemBarEnable(['status', 'navigation']);
    })
  }<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

作为IT专家，对于HarmonyOS鸿蒙Next沉浸式状态栏的最佳实践，以下是一些专业建议：

  1. 全屏布局：首先，使用setWindowLayoutFullScreen接口设置应用主窗口为全屏布局，这是实现沉浸式效果的基础。
  2. 状态栏与导航栏设置：调用setWindowSystemBarEnable接口，设置导航栏、状态栏的显示状态。如果希望隐藏它们，可以传递空数组。此外，通过setWindowSystemBarProperties接口，可以自定义状态栏和导航栏的透明度、背景/文字颜色以及高亮图标等属性，使之与主窗口显示协调一致。
  3. 背景色适配：为避免状态栏颜色和背景重合，可以根据状态栏以及内容区域的颜色设置窗口的背景色，或者使用expandSafeArea属性扩展安全区域，使顶部组件延伸到状态栏，形成沉浸式效果。
  4. 动态获取高度：对于需要实时获取状态栏和导航栏高度的页面，可以使用getWindowAvoidArea接口，然后存储并应用这些高度值。
  5. 注意事项：在设置expandSafeArea属性时，组件不能设置固定宽高尺寸，需与安全区域边界重合，且父组件需设置不裁剪内部组件。

遵循以上实践，可以确保HarmonyOS鸿蒙Next应用中的沉浸式状态栏效果最佳。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部