在鸿蒙应用中为导航栏添加沉浸光效，主要可以通过两种方式实现。如果你的导航栏是基于标准 Tabs 组件构建的，推荐使用 systemMaterial 通用属性；如果使用了 HDS 组件库，则推荐使用 systemMaterialEffect 配置。

准备工作：环境与导入

在开始前，请确保你的开发环境满足以下条件：

1. API 版本：沉浸光感效果从 API version 23（HarmonyOS 6.1.0）开始支持。

2. 模块导入：根据你选择的方案，在页面顶部导入对应的模块。

   • 方案一（systemMaterial）：导入 uiMaterial 模块。

     import { uiMaterial } from '@kit.ArkUI';
     

   • 方案二（systemMaterialEffect）：导入 UIDesignKit 相关模块。

     import { hdsMaterial, HdsTabs, HdsTabsController, BottomTabBarStyle } from '@kit.UIDesignKit';
     

方案一：使用 systemMaterial 通用属性（适用于标准 Tabs 组件）

这是为现有 Tabs 组件添加光效最直接的方式，通过 .systemMaterial() 属性应用一个材质对象。

步骤 1：创建材质对象

在组件中创建一个 uiMaterial.ImmersiveMaterial 对象。你可以根据需要选择不同的样式。

// 超薄样式，具有高度透明效果，适合浮动工具栏
private immersiveMaterial: uiMaterial.Material = new uiMaterial.ImmersiveMaterial({
  style: uiMaterial.ImmersiveStyle.ULTRA_THIN,
});

步骤 2：应用到 Tabs 组件

在 Tabs 组件的链式调用中，添加 .systemMaterial(this.immersiveMaterial)。

build() {
  Tabs({ index: $$this.currentTabIndex, barPosition: BarPosition.End }) {
    // ... TabContent 内容
  }
  .barHeight(56)
  .width('100%')
  .height('100%')
  // 应用沉浸光效
  .systemMaterial(this.immersiveMaterial)
}

方案二：使用 systemMaterialEffect 配置（适用于 HDS 组件）

如果你的项目使用了 HDS (HarmonyOS Design System) 组件，如 HdsTabs，则可以通过其专用的 barFloatingStyle 属性来开启光效。

步骤 1：使用 HdsTabs 组件

将你的 Tabs 组件替换为 HdsTabs，并配置好 TabContent。

步骤 2：配置 barFloatingStyle

在 HdsTabs 组件上，通过 .barFloatingStyle() 方法开启沉浸光感。核心是将 materialType 和 materialLevel 都设置为 hdsMaterial.MaterialLevel.ADAPTIVE，让系统根据设备性能自动选择最佳效果。

HdsTabs({ controller: this.tabsController }) {
  // TabContent 内容...
}
.barOverlap(true) // 通常需要开启悬浮效果
.barPosition(BarPosition.End)
.barFloatingStyle({
  barBottomMargin: 28,
  // 开启沉浸光感
  systemMaterialEffect: {
    materialType: hdsMaterial.MaterialType.ADAPTIVE,
    materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
  }
})

进阶配置：自定义光效参数

如果默认的自适应效果不满足需求，你可以进行更精细的调整。

• 调整光效强度 (方案一)：在创建 ImmersiveMaterial 时，可以调整 sourceType 和 illuminatedType 等参数。

  • sourceType: uiMaterial.SourceType.BRIGHT 可以使光效比默认的 SOFT 模式更明显。
  • illuminatedType: uiMaterial.IlluminatedType.BORDER_CONTENT 可以让组件的边框和内容都受到光照影响。

  private customMaterial: uiMaterial.Material = new uiMaterial.ImmersiveMaterial({
    style: uiMaterial.ImmersiveStyle.REGULAR,
    sourceType: uiMaterial.SourceType.BRIGHT,
    illuminatedType: uiMaterial.IlluminatedType.BORDER_CONTENT,
  });
  

• 控制材质精细度 (方案二)：除了 ADAPTIVE，你也可以根据需要指定具体的材质等级，例如 hdsMaterial.MaterialLevel.ULTRA_THIN 或 hdsMaterial.MaterialLevel.THICK。

注意事项

1. 真机验证：部分沉浸光效在模拟器上可能不支持或效果不佳，建议在真机上进行最终效果验证。
2. 设备自适应：沉浸光效会自动根据设备的算力档位进行调整，以保证在不同性能的设备上都能有流畅的体验。
3. API 版本：再次确认你的应用 build-profile.json5 中的 compileSdkVersion 和 compatibleSdkVersion 支持 API 23 或更高版本。