HarmonyOS 鸿蒙Next中横屏的状态下怎么避开安全区

【背景知识】

挖孔避让：横竖屏适配过程中，需要考虑核心内容与重要交互不要被挖孔区遮挡，如果被遮挡，则需进行局部内容避让；可滚动内容或非核心信息无需专门避让挖孔区；要避免因为避让挖孔导致左右侧留白不一致。

【解决方案】

方案一：设置组件安全区

组件安全区方案实现沉浸式是指通过设置组件的expandSafeArea属性，让内容覆盖系统栏区域，可以通过如下步骤，实现动态避让挖孔区。

1. 在module.json5文件中声明metadata，配置避让挖孔区。

{
  "module" :
  {
    "name" : "entry",
    "type" : "entry",
    "metadata":
    [
      {
        "name": "avoid_cutout",
        "value": "true"
      }
    ],
    // ...
    "abilities" :
    [
      {
        "name" : "EntryAbility",
        "orientation": "landscape", // 设置横屏
        // ...
      }
    ]
  }
}

1. 在页面根容器使用expandSafeArea属性，配置拓展安全区域SafeAreaType.CUTOUT，子组件不拓展挖孔区，即可在屏幕旋转时子组件自动避让挖孔区。

@Entry
@Component
struct Index {
  build() {
    Stack(){

      Image($r("app.media.test"))
        .objectFit(ImageFit.Contain)
        .align(Alignment.Center)
        .width('100%')
        .height('100%')
        .expandSafeArea([])

      Row(){
        Column(){
          Text("左边").fontColor(Color.White)
        }.backgroundColor(Color.Red)
        .width('10%')

        Column(){
          Text("上").fontColor(Color.White).backgroundColor(Color.Red)
          Text("中").fontColor(Color.White).backgroundColor(Color.Red).layoutWeight(1)
          Text("下").fontColor(Color.White).backgroundColor(Color.Red)
        }
        .layoutWeight(1)

        Column(){
          Text("右边").fontColor(Color.White)
        }.backgroundColor(Color.Red)
        .width('10%')
      }
      .width('100%')
      .height('100%')
      .expandSafeArea([])

    }.width('100%')
    .height('100%')
    .expandSafeArea()
  }
}

方案二：窗口全屏布局动态监听避让挖孔区

窗口全屏布局方案实现沉浸式是指通过setWindowLayoutFullScreen()实现全屏沉浸式。挖孔区域会随屏幕旋转而改变，需要使用on(‘avoidAreaChange’)动态监听挖孔区域变化，在监听回调中获取其挖孔区域信息，并根据挖孔区域信息动态刷新UI，保证在避让区变化后能够正确避让挖孔区。具体实现可以参考动态监听避让区变化。

【总结】

避让挖孔区可以通过设置组件安全区或者窗口全屏布局动态监听避让挖孔区两种方案实现。