HarmonyOS 鸿蒙Next关于窗口沉浸式的设置方式

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

HarmonyOS 鸿蒙Next关于窗口沉浸式的设置方式

app中有一个场景为：
一个子页面需要根据传入的参数进行判断，动态设置该页面是否为沉浸式，
查阅文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/application-window-stage-0000001427584712-V2#ZH-CN_TOPIC_0000001523968638__%E4%BD%93%E9%AA%8C%E7%AA%97%E5%8F%A3%E6%B2%89%E6%B5%B8%E5%BC%8F%E8%83%BD%E5%8A%9B
是只能设置整个应用的沉浸式状态吗？
如何能实现上面描述的功能


更多关于HarmonyOS 鸿蒙Next关于窗口沉浸式的设置方式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可以参考以下开发指南，使用expandSafeArea属性设置，使页面内组件无视顶部状态栏和底部导航栏的占用：

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

开发指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-develop-apply-immersive-effects-V13#section89942014473

下列demo是expandSafeArea属性的动态变化demo： // Index.ets

@Entry
@Component
struct Index{
  @State message: string = 'Hello World'
  private controller: TabsController = new TabsController()
  @State selfFadingFade: boolean = true;
  @State currentIndex: number = 0
  @State isTrue: boolean = false;

  build() {
    Column() {
      Image($r("app.media.ic_app_background"))
        .height('100%').width('100%')
        .expandSafeArea(this.isTrue? []:[SafeAreaType.SYSTEM], this.isTrue? []:[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) // 图片组件的绘制区域扩展至状态栏和导航条。
      // .expandSafeArea(null)

      Button("切换").onClick(()=>{
        this.isTrue = !this.isTrue
      })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next关于窗口沉浸式的设置方式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next关于窗口沉浸式的设置方式，主要包括以下几种：

一、设置全屏布局

  1. 调用setWindowLayoutFullScreen接口，将应用主窗口设置为全屏布局。
  2. 使用setWindowSystemBarProperties接口，设置导航栏、状态栏的透明度、背景/文字颜色等属性，使之与主窗口显示协调一致。

二、避让状态栏与导航栏

  1. 通过getWindowAvoidArea接口获取状态栏和导航栏的高度。
  2. 将获取到的高度转换为vp单位，并保存到AppStorage中。
  3. 页面使用StorageProp获取导航栏与状态栏高度，并进行避让。

三、设置安全区域

  1. 使用expandSafeArea属性扩展背景组件的安全区域，使UI元素能够延伸到状态栏和导航栏区域，形成沉浸式效果。
  2. 需要注意的是，设置expandSafeArea属性的组件需与安全区域边界重合，且不能设置固定宽高尺寸。

以上方法可以帮助开发者在HarmonyOS 鸿蒙Next上实现窗口的沉浸式效果。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部