HarmonyOS 鸿蒙Next 设置安全区域不生效

发布于 1周前 作者 nodeper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 设置安全区域不生效


build() {
Navigation() {
NavRouter() {
NavDestination() {
Text(‘page1’)
}.title(“Page 1”)
}


NavRouter() {
  NavDestination() {
    Text(<span class="hljs-string">'page2'</span>)
  }.title(<span class="hljs-string">"Page 2"</span>)
}

NavRouter() {
  NavDestination() {
    Text(<span class="hljs-string">'page3'</span>)
  }.title(<span class="hljs-string">"Page 3"</span>)
}

}
.title(“Navigation Title”)
.titleMode(NavigationTitleMode.Mini)
.width(‘100%’)
.height(‘100%’)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}

Harmonyos Next教程
2 回复

可以参考下面的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.');
  });
}
let storage = LocalStorage.getShared();

[@Entry](/user/Entry)(storage)
[@Component](/user/Component)
struct SafeAreaDemo {
  [@State](/user/State) isActiveWLAN: boolean = false
  [@State](/user/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 })
  }
}

针对HarmonyOS鸿蒙Next设置安全区域不生效的问题，以下是一些可能的解决方案：

  1. 检查组件设置：

    • 确保组件未设置固定宽高（百分比除外），因为设置固定宽高可能导致安全区域设置不生效。
    • 如果父容器是滚动容器，安全区域设置也可能不生效，此时需要调整父容器的类型或布局方式。

  2. 确认布局层级：

    • 检查是否存在层级较高的组件阻挡了当前组件的扩展。确保当前组件在层级上没有被其他组件覆盖或其扩展被限制。

  3. 检查安全区域设置：

    • 确认是否已正确设置窗口全屏布局或组件安全区方案，以及是否与其他安全区域设置冲突。
    • 确保开发环境及API版本支持相应的安全区域设置属性。

  4. 动态调整布局：

    • 如果静态的布局设置无法满足需求，考虑使用JavaScript逻辑动态调整布局。

如果尝试了上述解决方案后问题依旧无法解决，可能是由于系统或应用本身的bug导致。此时，您可以联系官网客服获取更具体的帮助和解决方案。官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部