HarmonyOS 鸿蒙Next中怎么让HdsTabs避让安全区

HarmonyOS 鸿蒙Next中怎么让HdsTabs避让安全区 如题，我现在使用的办法是手动获取安全区的高度，然后给.barFloatingStyle的barBottomMargin属性值设为底部安全区高度，但是我总感觉这样可能不太好，按理说这个应该有直接自动避让的方法吧？

import { hdsMaterial, HdsTabs, HdsTabsController } from '@kit.UIDesignKit';
import { HomePage } from './tabs/HomePage';
import { RecordPage } from './tabs/RecordPage';
import { MinePage } from './tabs/MinePage';
import { window } from '@kit.ArkUI';

@Entry
@Component
struct MainApp {
  private hdsTabsController: HdsTabsController = new HdsTabsController();
  
  @State bottomSafeHeight: number = 0;   // 存储系统导航栏高度（单位：vp）

  async aboutToAppear() {
    // 获取当前窗口
    const windowClass = await window.getLastWindow(getContext(this));
    // 获取底部导航指示器区域（即系统导航栏）
    const avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
    // 将 px 转换为 vp（因为在布局中使用的长度单位是 vp）
    this.bottomSafeHeight = px2vp(avoidArea.bottomRect.height);
  }

  build() {
    Column() {
      HdsTabs({ controller: this.hdsTabsController }) {
        TabContent() {
          HomePage()
        }
        TabContent() {
          RecordPage()
        }
        TabContent() {
          MinePage()
        }
      }
      .scrollable(false)
      .barOverlap(true)
      .barPosition(BarPosition.End)
      .barFloatingStyle({
        systemMaterialEffect: {
          materialType: hdsMaterial.MaterialType.ADAPTIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        },
        barBottomMargin: this.bottomSafeHeight,   // 动态避让系统导航栏高度
      })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next中怎么让HdsTabs避让安全区的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

如果你用的是 HdsTabs 的悬浮页签/迷你栏样式，手动把 barFloatingStyle 的 barBottomMargin 设成底部安全区高度并不算偏门做法，关键是不要写死固定值，而是从窗口安全区/避让区动态计算。

可以先确认两点：

  1. 页面是否做了全屏或 expandSafeArea。全屏后内容进入系统安全区是预期行为，HdsTabs 不一定会替业务自动把悬浮栏再抬上来。
  2. HdsTabs 是否设置了 barOverlap(true)、barPosition(BarPosition.End) 这类底部叠加样式。叠加到底部时，内容区和底部栏都需要你自己处理安全区关系。

实践上建议：根布局负责决定是否扩展到安全区；HdsTabs 负责页签样式；底部安全区只转换成一个 bottom inset 状态，再传给 barBottomMargin。这样旋转、折叠态、手势导航栏高度变化时，只要监听窗口区域变化并更新 inset，就不会写死一套高度。

如果没有开启全屏/扩展安全区，仍然必须手动加安全区才不被遮挡，那更像 HdsTabs 悬浮样式的适配问题，可以带上最小 demo、API 版本和设备形态反馈给组件侧确认。

更多关于HarmonyOS 鸿蒙Next中怎么让HdsTabs避让安全区的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你是不是设置全屏了？

HarmonyOS的分布式文件系统让我在多设备间传输文件变得轻松无比。

是的，

贴出最小demo的代码，帮你解决。

import { hdsMaterial, HdsTabs, HdsTabsController } from '@kit.UIDesignKit';
import { HomePage } from './tabs/HomePage';
import { RecordPage } from './tabs/RecordPage';
import { MinePage } from './tabs/MinePage';
import { window } from '@kit.ArkUI';

@Entry
@Component
struct MainApp {
  private hdsTabsController: HdsTabsController = new HdsTabsController();
  
  @State bottomSafeHeight: number = 0;   // 存储系统导航栏高度（单位：vp）

  async aboutToAppear() {
    // 获取当前窗口
    const windowClass = await window.getLastWindow(getContext(this));
    // 获取底部导航指示器区域（即系统导航栏）
    const avoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
    // 将 px 转换为 vp（因为在布局中使用的长度单位是 vp）
    this.bottomSafeHeight = px2vp(avoidArea.bottomRect.height);
  }

  build() {
    Column() {
      HdsTabs({ controller: this.hdsTabsController }) {
        TabContent() {
          HomePage()
        }
        TabContent() {
          RecordPage()
        }
        TabContent() {
          MinePage()
        }
      }
      .scrollable(false)
      .barOverlap(true)
      .barPosition(BarPosition.End)
      .barFloatingStyle({
        systemMaterialEffect: {
          materialType: hdsMaterial.MaterialType.ADAPTIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        },
        barBottomMargin: this.bottomSafeHeight,   // 动态避让系统导航栏高度
      })
    }
  }
}

在HarmonyOS Next中，对HdsTabs组件设置expandSafeArea属性为SafeAreaType.INVALID，并配合padding手动适配安全区。或在外层使用SafeArea容器包裹，指定避让方向。

目前 HdsTabs 并未提供直接自动避让系统安全区的属性。你当前的手动获取安全区高度并设置 barBottomMargin 的做法就是官方推荐的标准方案，不是临时妥协。

如果需要一种自动适应逻辑，可以用 SystemSafeArea 组件包裹 Tabs，但本质上它也是读取系统区域后为你提供间距，且会增加一层嵌套；而直接获取 getWindowAvoidArea 并赋值给 barBottomMargin 是最直接、轻量的实现。

简单说：没有“直接自动避让”的属性，安心用你现在的写法即可。

回到顶部