作者：梅科尔工作室王文浩

前言

最近鸿蒙6.1带来了悬浮标签页和沉浸光感两个新特性，我在自己的应用“视语通达”里实际接入了一下。效果比预期要好——底部导航不再紧贴屏幕边缘，而是浮在内容上方，配合玻璃质感的光影，整个界面显得更通透、更有层次感。

“视语通达”是一款手语翻译与交流的工具，对视觉和交互的流畅度要求比较高。实际接入下来，这两个特性确实让应用的层次感和质感都上了一个台阶，操作也更舒服了。今天就把实践中的一些经验和配置细节分享给大家，希望对同样在摸索鸿蒙 UI 开发的你有所帮助。

下面就把配置参数、实现代码和踩坑点整理出来，供大家参考。

一、新特性概览

1.1 悬浮标签页

从HarmonyOS 6.1.0(23)版本开始，HdsTabs组件新增了悬浮样式支持。传统的底部标签栏都是固定贴着屏幕底部的，虽然稳定但总觉得视觉上有些"占地方"。悬浮标签页就不一样了，它让标签栏"浮"在内容上方，形成一种分层效果。

核心优势：

• 页签栏悬浮在内容区域之上，减少对内容空间的占用
• 支持多种宽度档位配置，适配不同屏幕尺寸
• 可配置渐变遮罩、透明度等视觉效果

1.2 沉浸光感

沉浸光感是HDS提供的一种高级视觉效果，通过系统材质渲染技术，模拟真实世界的光影层次，为界面元素增添深度、质感和动态感。

两种配置模式：

• 系统自适应模式（推荐）：让系统根据设备性能自动调整效果，无需手动适配
• 自定义模式：根据设备能力查询结果，选择合适的材质级别

二、配置参数详解

2.1 HdsTabsFloatingStyle 属性说明

属性名	类型	说明
barWidth	HdsBarWidthRangeOptions	页签栏分档宽度，支持小、中、大三个档位
barSideMargin	Length	页签栏与左右边距
barBottomMargin	Length	页签栏与底部距离，默认0vp
gradientMask	HdsTabsBackgroundStyle	背板蒙层样式，可设置蒙层高度和颜色
barOpacity	number	页签栏透明度，范围0-1
systemMaterialEffect	SystemMaterialParams	沉浸光感材质参数

2.2 SystemMaterialParams 材质配置

参数名	类型	说明
materialType	hdsMaterial.MaterialType	材质类型：NONE、ADAPTIVE、IMMERSIVE
materialLevel	hdsMaterial.MaterialLevel	材质级别：ADAPTIVE、EXQUISITE、GENTLE、SMOOTH

材质类型详解：

• NONE：无材质效果
• ADAPTIVE：自适应系统材质（推荐），系统自动选择最优效果
• IMMERSIVE：沉浸材质，视觉效果最丰富

材质级别详解：

• ADAPTIVE：自适应，系统动态调整
• EXQUISITE：精致级别，最高质量光影渲染
• GENTLE：柔和级别，平衡效果与性能
• SMOOTH：流畅级别，适合低性能设备

三、完整实现步骤

3.1 导入必要模块

import { 
  HdsNavigation, 
  HdsNavigationTitleMode, 
  HdsTabs, 
  HdsTabsController, 
  HdsNavigationMenuContentOptions, 
  ScrollEffectType, 
  hdsMaterial 
} from '@kit.UIDesignKit';
import { SymbolGlyphModifier } from '@kit.ArkUI';

3.2 定义页签配置接口

interface MenuItem {
  symbolGlyph: SymbolGlyphModifier,      // 未选中状态图标
  symbolGlyph1: SymbolGlyphModifier,     // 选中状态图标
  label: string,                          // 页签文本
  defaultBgColor: ResourceColor,          // 默认背景色
  hoverBgColor: ResourceColor,            // 悬停状态背景色
  pressBgColor: ResourceColor             // 按压状态背景色
}

3.3 配置页签数据

以下示例展示了如何配置三个底部页签：

const MENU_CONFIG: MenuItem[] = [
  {
    symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.house_fill'))
      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
      .fontColor([
        $r('sys.color.ohos_id_color_bottom_tab_icon_off'),
        $r('sys.color.ohos_id_color_bottom_tab_icon_auxcolor_off02')
      ]),
    symbolGlyph1: new SymbolGlyphModifier($r('sys.symbol.house_fill'))
      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
      .fontColor([
        $r('sys.color.ohos_id_color_activated'), 
        $r('sys.color.ohos_id_color_primary_contrary')
      ]),
    label: '首页',
    defaultBgColor: Color.Transparent,
    hoverBgColor: $r('sys.color.ohos_id_color_hover'),
    pressBgColor: $r('sys.color.ohos_id_color_click_effect')
  },
  {
    symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.book_pages_fill_1'))
      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
      .fontColor([
        $r('sys.color.ohos_id_color_bottom_tab_icon_off'),
        $r('sys.color.ohos_id_color_bottom_tab_icon_auxcolor_off02')
      ]),
    symbolGlyph1: new SymbolGlyphModifier($r('sys.symbol.book_pages_fill_1'))
      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
      .fontColor([
        $r('sys.color.ohos_id_color_activated'), 
        $r('sys.color.ohos_id_color_primary_contrary')
      ]),
    label: '发现',
    defaultBgColor: Color.Transparent,
    hoverBgColor: $r('sys.color.ohos_id_color_hover'),
    pressBgColor: $r('sys.color.ohos_id_color_click_effect')
  },
  {
    symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.person_crop_circle_fill_1'))
      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
      .fontColor([
        $r('sys.color.ohos_id_color_bottom_tab_icon_off'),
        $r('sys.color.ohos_id_color_bottom_tab_icon_auxcolor_off02')
      ]),
    symbolGlyph1: new SymbolGlyphModifier($r('sys.symbol.person_crop_circle_fill_1'))
      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
      .fontColor([
        $r('sys.color.ohos_id_color_activated'), 
        $r('sys.color.ohos_id_color_primary_contrary')
      ]),
    label: '我的',
    defaultBgColor: Color.Transparent,
    hoverBgColor: $r('sys.color.ohos_id_color_hover'),
    pressBgColor: $r('sys.color.ohos_id_color_click_effect')
  }
];

3.4 完整页面实现（官方推荐方式）

@Entry
@Component
struct Index {
  private scrollerForScroll: Scroller = new Scroller();
  private controller: HdsTabsController = new HdsTabsController();

  build() {
    HdsNavigation() {
      HdsTabs({ controller: this.controller }) {
        ForEach(MENU_CONFIG, (item: MenuItem) => {
          TabContent() {
            Stack() {
              Scroll(this.scrollerForScroll) {
                Column() {
                  // 在这里放置你的页面内容
                  // 例如：列表、卡片、图片等组件
                  Text(`${item.label}页面内容`)
                    .fontSize(20)
                    .margin({ top: 100 })
                }
              }
              .clipContent(ContentClipMode.SAFE_AREA)
              .height('100%')
            }
          }
          .tabBar(new BottomTabBarStyle({
            normal: item.symbolGlyph, 
            selected: item.symbolGlyph1
          }, item.label))
        })
      }
      .barOverlap(true)                    // 开启页签栏与内容重叠
      .vertical(false)                      // 页签栏水平排列
      .barPosition(BarPosition.End)         // 页签栏位于底部
      .barFloatingStyle({
        // 配置页签栏宽度档位
        barWidth: { 
          smallWidth: 300, 
          mediumWidth: 500, 
          largeWidth: 700 
        },
        // 页签栏与底部距离
        barBottomMargin: 20,
        // 设置沉浸光感效果
        systemMaterialEffect: {
          materialType: hdsMaterial.MaterialType.ADAPTIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        }
      })
    }
    .mode(NavigationMode.Stack)
    .bindToScrollable([this.scrollerForScroll])
    .hideBackButton(true)
    .titleMode(HdsNavigationTitleMode.MINI)
    .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
  }
}

四、实战应用

4.1 应用场景

在我的应用中，主页面需要展示多个功能模块，为了提升视觉体验和交互流畅度，采用了悬浮标签页配合沉浸光感的设计方案。

4.2 实现要点

根据实际需求，我对配置参数进行了针对性调整：

.barFloatingStyle({
  barWidth: { 
    smallWidth: 300,   // 小屏设备宽度
    mediumWidth: 500,  // 中屏设备宽度
    largeWidth: 700    // 大屏设备宽度
  },
  barBottomMargin: 20,  // 悬浮高度，根据实际UI调整
  systemMaterialEffect: {
    materialType: hdsMaterial.MaterialType.ADAPTIVE,
    materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
  }
})

4.3 注意事项

在实际开发中，需要注意以下几点：

1. 内容区域padding处理

悬浮标签页会覆盖部分内容，需要为内容区域预留底部空间：

Column() {
  // 页面内容
}
.padding({ bottom: 100 })  // 根据标签栏高度调整

2. 安全区域处理

确保内容不被键盘等系统UI遮挡：

.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])

3. 滚动联动

绑定滚动控制器，实现导航栏与内容的联动：

.bindToScrollable([this.scrollerForScroll])

五、效果对比

5.1 传统标签页 vs 悬浮标签页

对比项	传统标签页	悬浮标签页
视觉层次	平面感强	立体分层
内容空间	占用固定区域	浮于内容之上
视觉质感	普通平面	沉浸光感加持
交互反馈	基础切换	流畅自然

5.2 实际体验

接入这两个特性后，最直观的感受是：

• 层次感更强：悬浮的页签栏与内容形成明确的视觉分层
• 交互更流畅：切换标签时的反馈更自然
• 质感提升明显：沉浸光感让界面看起来更精致
• 内容展示更充分：悬浮设计减少了对内容区域的占用
  

六、避坑指南

6.1 版本兼容性

这两个特性需要HarmonyOS 6.1（API 23）及以上版本支持。建议在项目中添加版本判断：

import deviceInfo from '@ohos.deviceInfo';

// 检查API版本
if (deviceInfo.distributionOSApiVersion >= 60100) {
  // 使用新特性
} else {
  // 使用传统方案
}

6.2 性能优化

沉浸光感效果会消耗一定的系统资源，建议：

• 优先使用ADAPTIVE模式，让系统自动平衡性能与效果
• 在低性能设备上，可以考虑降级为SMOOTH级别
• 避免在同一页面使用过多材质效果

6.3 图标适配

使用SymbolGlyphModifier时，建议：

• 采用系统Symbol图标，对多色渲染支持更好
• 正确配置选中/未选中状态的颜色
• 使用系统预定义颜色资源，保证风格统一

6.4 布局细节

• 根据实际UI调整barBottomMargin值
• 为内容区域预留足够的底部padding
• 测试不同屏幕尺寸下的显示效果

七、总结

悬浮标签页和沉浸光感这两个特性，让鸿蒙应用的UI设计有了更多可能性。它们不是简单的视觉美化，而是通过合理的层次设计和光影效果，提升了整体的用户体验。

核心要点回顾：

1. 使用barFloatingStyle配置悬浮样式
2. 通过systemMaterialEffect启用沉浸光感
3. 优先使用ADAPTIVE模式实现自适应效果
4. 注意内容区域的padding和安全区域处理
5. 做好版本兼容性判断

对于开发者来说，接入这两个特性并不复杂，关键在于理解它们的配置参数，以及在项目中找到合适的场景应用。希望这篇分享能给大家带来一些启发，让更多鸿蒙应用拥有更精致的视觉体验。

---

视语通达应用市场链接：视语通达