HarmonyOS 设置安全区域不生效？

Question

build() {
  Navigation() {
    NavRouter() {
      NavDestination() {
        Text('page1')
      }.title("Page 1")
    }

    NavRouter() {
      NavDestination() {
        Text('page2')
      }.title("Page 2")
    }

    NavRouter() {
      NavDestination() {
        Text('page3')
      }.title("Page 3")
    }
  }
  .title("Navigation Title")
  .titleMode(NavigationTitleMode.Mini)
  .width('100%')
  .height('100%')
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}

如何避开顶部状态栏和底部导航栏

Answer 1

可以参考下面的demo

参考文档：

沉浸式：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5\#section171801550301

demo：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navrouter-V5\#%E7%A4%BA%E4%BE%8B

entryAbility里获取底部导航栏高度：

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/SafeAreaDemo', (err) => {
  if (err.code) {
  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
  return;
}
let windowClass: window.Window = windowStage.getMainWindowSync();
let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
let avoidArea = windowClass.getWindowAvoidArea(type);
let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度
AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});
}

参考demo:

let storage = LocalStorage.getShared();
@Entry(storage)
@Component
struct SafeAreaDemo {
  @State isActiveWLAN: boolean = false
  @State isActiveBluetooth: boolean = false
  bottomRectHeight: string = AppStorage.get<number>('bottomRectHeight') + 'px';

  aboutToAppear(): void {
    console.log('底部导航栏高度：' + this.bottomRectHeight)
  }
  build() {
    Navigation() {
      NavRouter() {
        Row() {
          Row()
            .width(30)
            .height(30)
            .borderRadius(30)
            .margin({ left: 3, right: 10 })
            .backgroundColor(Color.Pink)
          Text(`WLAN`)
            .fontSize(22)
            .fontWeight(500)
            .textAlign(TextAlign.Center)
        }
        .width('90%')
        .height(60)

        NavDestination() {
          Flex({ direction: FlexDirection.Row }) {
            Text('未找到可用WLAN').fontSize(30).padding({ left: 15 })
          }
        }.title("WLAN")
      }
      .margin({ top: 10, bottom: 10 })
      .backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff')
      .borderRadius(20)
      .mode(NavRouteMode.PUSH_WITH_RECREATE)
      .onStateChange((isActivated: boolean) => {
        this.isActiveWLAN = isActivated
      })

      NavRouter() {
        Row() {
          Row()
            .width(30)
            .height(30)
            .borderRadius(30)
            .margin({ left: 3, right: 10 })
            .backgroundColor(Color.Pink)
          Text(`蓝牙`)
            .fontSize(22)
            .fontWeight(500)
            .textAlign(TextAlign.Center)
        }
        .width('90%')
        .height(60)

        NavDestination() {
          Flex({ direction: FlexDirection.Row }) {
            Text('未找到可用蓝牙').fontSize(30).padding({ left: 15 })
          }
        }.title("蓝牙")
      }
      .margin({ top: 10, bottom: 10 })
      .backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff')
      .borderRadius(20)
      .mode(NavRouteMode.REPLACE)
      .onStateChange((isActivated: boolean) => {
        this.isActiveBluetooth = isActivated
      })
    }
    .width('100%')
    .title('设置')
    .backgroundColor("#F2F3F5")
    .titleMode(NavigationTitleMode.Free)
    .mode(NavigationMode.Stack)
    .margin({'bottom': this.bottomRectHeight})
  }
}