HarmonyOS 6.1 新特性：悬浮页签和沉浸光感技术实践

不喝水就会渴2026-04-29 15:43

HarmonyOS 6.1 新特性：悬浮页签和沉浸光感技术实践

    • 引言
    • [2. 悬浮页签特性详解](#2. 悬浮页签特性详解)
      • [2.1 悬浮样式介绍](#2.1 悬浮样式介绍)
      • [2.2 示例代码](#2.2 示例代码)
      • [2.3 迷你栏功能（悬浮样式扩展）](#2.3 迷你栏功能（悬浮样式扩展）)
      • [2.4 HdsTabsFloatingStyle 详细介绍](#2.4 HdsTabsFloatingStyle 详细介绍)
    • [3. 沉浸光感特性详解](#3. 沉浸光感特性详解)
      • [3.1 沉浸光感介绍](#3.1 沉浸光感介绍)
      • [3.2 应用场景](#3.2 应用场景)
      • [3.3 实现方式](#3.3 实现方式)
        • [3.3.1 系统自适应的沉浸光感（推荐）](#3.3.1 系统自适应的沉浸光感（推荐）)
        • [3.3.2 自定义沉浸光感效果](#3.3.2 自定义沉浸光感效果)
      • [3.4 SystemMaterialParams 详细介绍](#3.4 SystemMaterialParams 详细介绍)
    • [4. 喵屿APP悬浮页签与沉浸光感的实践](#4. 喵屿APP悬浮页签与沉浸光感的实践)
      • [4.1 项目背景与需求](#4.1 项目背景与需求)
      • [4.2 项目中的HdsTabs应用（含兼容性处理）](#4.2 项目中的HdsTabs应用（含兼容性处理）)
      • [4.3 实践效果](#4.3 实践效果)
      • [4.4 技术要点总结](#4.4 技术要点总结)
    • [5. 总结与展望](#5. 总结与展望)

引言

随着HarmonyOS生态的持续演进，用户对移动应用的UI设计质感和交互体验提出了更高要求------不仅需要功能实用，更追求界面的精致度、层次感和沉浸感。华为推出的 UI Design Kit（HDS） 作为HarmonyOS官方设计体系，为开发者提供了一套标准化、高可用的组件与样式解决方案，助力开发者快速打造符合系统设计规范、兼具美观与实用性的应用界面。

HarmonyOS 6.1版本 重磅推出了悬浮页签（HdsTabs Floating Style）与沉浸光感两大核心UI特性，进一步丰富了应用界面的设计维度。悬浮页签打破了传统页签栏固定底部的布局限制，通过悬浮于内容上方的设计，提升页面层次感的同时释放更多内容展示空间；沉浸光感则借助系统材质效果，为界面元素注入深度与质感，让交互过程更具视觉张力。

本文将详细拆解这两个特性的核心用法、属性配置与实现细节，结合"喵屿"智能养宠陪伴APP的实际项目案例，展示特性在真实场景中的落地实践，包括API兼容性处理、样式适配与交互优化，为HarmonyOS开发者提供可直接参考的技术方案，助力大家高效应用新特性，打造更优质的用户体验。

2. 悬浮页签特性详解

2.1 悬浮样式介绍

悬浮样式是HdsTabs组件从6.1.0(23)版本新增的核心特性，其核心优势在于允许页签栏脱离底部固定布局，悬浮在内容区域上方，形成"内容在下、页签在上"的分层视觉效果。这种设计不仅能增强界面的空间层次感，还能减少页签栏对内容区域的遮挡，为长内容展示（如列表、详情页）预留更多空间，尤其适用于内容驱动型应用。

悬浮页签支持灵活的样式配置，包括页签栏宽度、边距、透明度、渐变遮罩等，可根据应用场景和设备尺寸动态适配，兼顾美观与实用性。

2.2 示例代码

以下代码完整演示了HdsTabs组件的导入、控制器初始化及悬浮样式的配置，关键步骤添加详细注释，便于开发者理解每一步的作用。

1. 导入相关模块

typescript 复制代码 
// 导入HDS材质相关模块，用于设置沉浸光感材质
import { hdsMaterial } from '@hms.hds.hdsMaterial';
// 导入HdsTabs组件及控制器，核心用于实现悬浮页签功能
import { HdsTabs, HdsTabsController } from '@kit.UIDesignKit';

2. 创建HdsTabs组件并设置悬浮样式

typescript 复制代码 
@Entry
@Component
struct Index {
  // 初始化HdsTabs控制器，用于控制页签切换、状态管理等核心操作
  private controller: HdsTabsController = new HdsTabsController();

  build() {
    Column() {
      // 初始化HdsTabs组件，绑定控制器实现页签管理
      HdsTabs({ controller: this.controller }) {
        // 第一个页签内容区域，可根据实际需求填充页面内容
        TabContent() {
          // 内容区域（示例：可放置列表、表单、图片等组件）
        }
        // 配置第一个页签的底部样式，指定图标和文本
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_ic_public_clock'), 'Tab1'))

        // 第二个页签内容区域
        TabContent() {
          // 内容区域（示例：可放置与第一个页签不同的功能模块）
        }
        // 配置第二个页签的底部样式
        .tabBar(new BottomTabBarStyle($r('sys.media.wifi_router_fill'), 'Tab2'))
      }
      // 开启页签栏与内容区域重叠，为悬浮效果奠定基础
      .barOverlap(true)
      // 设置页签栏位于底部（BarPosition.End对应底部，Start对应顶部）
      .barPosition(BarPosition.End)
      // 设置页签栏水平排列（vertical为true时垂直排列）
      .vertical(false)
      // 核心：配置页签栏悬浮样式，各项参数按需调整
      .barFloatingStyle({
        // 页签栏分档宽度，适配不同屏幕尺寸
        barWidth: { smallWidth: 200, mediumWidth: 300, largeWidth: 400 },
        // 页签栏与底部的距离，控制悬浮高度
        barBottomMargin: 28,
        // 渐变遮罩配置，增强悬浮层次感，避免与内容过度重叠
        gradientMask: { maskColor: '#66F1F3F5', maskHeight: 92 },
        // 沉浸光感材质配置，后续章节详细说明
        systemMaterialEffect: {
          materialType: hdsMaterial.MaterialType.IMMERSIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        }
      })
    }
  }
}

2.3 迷你栏功能（悬浮样式扩展）

迷你栏是悬浮样式的重要扩展功能，本质是一个与页签栏高度相等、水平对齐的自定义区域，支持展开和折叠 两种状态，可用于放置快捷操作按钮、提示信息等，进一步提升交互便捷性。迷你栏通过在barFloatingStyle中配置miniBar属性实现，开发者可自定义其内容与样式。

typescript 复制代码 
.barFloatingStyle({
  // 其他悬浮样式配置（省略，同上文）
  // 配置迷你栏，指定自定义构建方法
  miniBar: {
    miniBarBuilder: () => this.miniBarBuilder()
  }
})

// 自定义迷你栏内容，此处示例为左右两个图标+中间文本的布局
@Builder
miniBarBuilder() {
  Row() {
    // 左侧快捷图标（示例：停止闹钟图标）
    Column() {
      Image($r('app.media.alarm_stop'))
        .width(40)
        .height(40)
        .borderRadius(40) // 圆形图标，提升美观度
    }.width(48).height(48).justifyContent(FlexAlign.Center)

    // 中间文本提示
    Text('Hello')

    // 右侧快捷图标（示例：暂停图标）
    Column() {
      Image($r('sys.media.ohos_ic_public_pause'))
        .width(40)
        .height(40)
        .borderRadius(40)
    }.width(48).height(48).justifyContent(FlexAlign.Center)
  }
}

迷你栏的折叠样式如下图所示：

迷你栏的展开样式如下图所示：

官方文档链接

2.4 HdsTabsFloatingStyle 详细介绍

HdsTabsFloatingStyle是悬浮样式的核心配置对象，用于定义悬浮页签栏的各项视觉与交互属性，支持多设备适配，其起始支持版本为6.1.0(23)，具体属性说明如下：

名称 类型 只读 可选 说明
barWidth HdsBarWidthRangeOptions 否 是 页签栏分档宽度。默认值：页签个数≤3且HdsTabs宽度<600vp时，单个页签宽度76vp；HdsTabs宽度≥600vp时，单个页签宽度80vp；页签个数≥4时，页签栏最大宽度不超过328vp。
barSideMargin Length 否 是 页签栏与HdsTabs左右边距。默认值：HdsTabs宽度<600vp时16vp；600vp≤宽度<840vp时24vp；宽度≥840vp时32vp。
barBottomMargin Length 否 是 页签栏与HdsTabs底部距离。默认值：0vp（贴合底部）。
gradientMask HdsTabsBackgroundStyle 否 是 背板蒙层的样式设置，可设置蒙层高度和颜色。默认值：浅色模式#CCF1F3F5，深色模式#99000000；蒙层高度=页签栏默认高度+16vp。
miniBar HdsTabsMiniBar 否 是 迷你栏的属性配置。默认值：undefined（不显示迷你栏）。
adaptToHandedness boolean 否 是 左右跟手开关。true：跟手；false：不跟手。默认值：false。
lightColor ResourceColor 否 是 页签栏光效颜色。默认值：深色模式#33E5E5E5，浅色模式#33fffffff。
barOpacity number 否 是 页签栏透明度，1表示不透明，0表示完全透明。默认值：1。
thermoCtrl boolean 否 是 温控开关。true：开启温控；false：不开启温控。默认值：false。
systemMaterialEffect SystemMaterialParams 否 是 材质参数，用于设置沉浸光感效果。默认值：undefined（无新材质）。

3. 沉浸光感特性详解

3.1 沉浸光感介绍

沉浸光感是HDS提供的一种高级视觉效果，基于系统材质渲染技术，通过模拟真实世界的光影层次，为界面元素增添深度、质感和动态感。与传统平面UI相比，沉浸光感能让组件呈现出"悬浮于界面之上"的视觉体验，提升应用的精致度和用户沉浸感，尤其适用于导航栏、底部页签等核心交互组件。

沉浸光感的核心优势是 "自适应"与"可定制"：系统可根据设备性能、屏幕亮度等环境因素动态调整效果，同时开发者也可根据需求自定义材质类型和级别，平衡视觉效果与性能消耗。

3.2 应用场景

沉浸光感可广泛应用于HDS核心组件，核心应用场景包括：

  • HDS导航 ：通过设置TitleBarStyleOptions的systemMaterialEffect参数，为标题栏按钮、标题区域添加沉浸光感，提升导航栏的视觉层次。

  • HDS底部页签 ：通过设置HdsTabsFloatingStyle的systemMaterialEffect参数，为悬浮页签栏添加沉浸光感，与悬浮样式相辅相成，增强分层效果。

3.3 实现方式

3.3.1 系统自适应的沉浸光感（推荐）

系统自适应模式是最推荐的实现方式，系统会根据当前设备的算力、屏幕特性动态调整材质效果，自动平衡视觉体验与性能消耗，无需开发者手动适配不同设备，适配性更强。

以下官方示例代码为底部悬浮页签和标题栏按钮设置自适应沉浸光感，包含完整的组件结构和详细注释：

typescript 复制代码 
@Entry
@Component
export struct Index {
  // 滚动控制器，用于绑定导航栏与滚动区域的联动
  private scrollerForScroll: Scroller = new Scroller();
  // 页签控制器，用于管理底部页签切换
  private controller: HdsTabsController = new HdsTabsController();

  // 导航栏菜单配置，用于渲染标题栏右侧功能按钮
  private menus: HdsNavigationMenuContentOptions = {
    value: [{
      content: {
        label: 'menu1',
        icon: $r('sys.symbol.square_and_pencil'),
      }
    }, {
      content: {
        label: 'menu2',
        icon: $r('sys.symbol.star')
      },
    },{
      content: {
        label: 'menu3',
        icon: $r('sys.symbol.more')
      },
    }
    ],
  };

  build() {
    // 初始化HDS导航组件，作为页面根容器
    HdsNavigation() {
      // 底部悬浮页签组件，与导航栏联动
      HdsTabs({ controller: this.controller }) {
        // 循环渲染页签内容（基于MENU_CONFIG配置，可灵活扩展）
        ForEach(MENU_CONFIG, (item: MenuItem) => {
          TabContent() {
            Stack() {
              // 滚动区域，用于展示长内容（如图片、列表）
              Scroll(this.scrollerForScroll) {
                Column() {
                  // 示例图片，开发者需替换为本地自定义资源
                  Image($r("app.media.scenery01")).width('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({
        barBottomMargin: 28,
        systemMaterialEffect:  {
          // 材质类型：自适应系统材质（默认沉浸式）
          materialType: hdsMaterial.MaterialType.ADAPTIVE,
          // 材质级别：自适应（系统根据设备性能调整）
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        }
      })
    }
    // 导航栏模式：栈模式（适合多页面跳转）
    .mode(NavigationMode.Stack)
    // 配置导航栏标题栏，添加沉浸光感
    .titleBar({
      content: {
        title: {
          mainTitle: 'MainTitle', // 标题文本
        },
        menu: this.menus, // 右侧菜单按钮
      },
      style: {
        scrollEffectOpts: {
          enableScrollEffect: false,
          scrollEffectType: ScrollEffectType.GRADIENT_BLUR,
        },
        // 标题栏按钮沉浸光感（自适应模式）
        systemMaterialEffect: {
          materialType: hdsMaterial.MaterialType.ADAPTIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        },
      },
      avoidLayoutSafeArea: false,
      enableComponentSafeArea: false
    })
    // 绑定滚动控制器，实现导航栏与滚动区域的联动效果
    .bindToScrollable([this.scrollerForScroll])
    .hideBackButton(false) // 显示返回按钮
    .titleMode(HdsNavigationTitleMode.MINI) // 迷你标题模式
    // 忽略系统安全区域，让导航栏、页签栏更好地适配全屏
    .ignoreLayoutSafeArea([LayoutSafeAreaType.SYSTEM], [LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM])
  }
}

// 定义页签配置接口，规范页签样式参数
interface MenuItem {
  symbolGlyph: SymbolGlyphModifier, // 未选中状态图标
  symbolGlyph1: SymbolGlyphModifier, // 选中状态图标
  label: string, // 页签文本
  defaultBgColor: ResourceColor, // 默认背景色
  hoverBgColor: ResourceColor, // hover状态背景色
  pressBgColor: ResourceColor, // 按压状态背景色
};

// 页签配置数组，可根据实际需求扩展页签数量和样式
const MENU_CONFIG: MenuItem[] = [
  {
    symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.alarm_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.alarm_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.worldclock_fill_2')).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.worldclock_fill_2')).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.stopwatch_2')).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.stopwatch_2')).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.3.2 自定义沉浸光感效果

若需更精细的视觉控制，可通过自定义沉浸光感效果实现。核心步骤是先调用getSystemMaterialTypes()接口查询当前设备支持的材质能力，再根据查询结果选择对应的材质类型和级别，避免因设备不支持导致的性能问题（如卡顿、发热）。

核心逻辑：设备支持IMMERSIVE材质 → 选用EXQUISITE（精致）或GENTLE（柔和）级别；设备不支持IMMERSIVE → 选用SMOOTH（流畅）级别，保证基础视觉效果的同时降低性能消耗。

以下示例代码演示了自定义沉浸光感的实现（核心配置与自适应模式一致，仅材质参数可动态调整）：

typescript 复制代码 
@Entry
@Component
export struct Index {
  private scrollerForScroll: Scroller = new Scroller();
  private controller: HdsTabsController = new HdsTabsController();

  private menus: HdsNavigationMenuContentOptions = {
    value: [{
      content: {
        label: 'menu1',
        icon: $r('sys.symbol.square_and_pencil'),
      }
    }, {
      content: {
        label: 'menu2',
        icon: $r('sys.symbol.star')
      },
    },{
      content: {
        label: 'menu3',
        icon: $r('sys.symbol.more')
      },
    }
    ],
  };

  build() {
    HdsNavigation() {
      HdsTabs({ controller: this.controller }) {
        ForEach(MENU_CONFIG, (item: MenuItem) => {
          TabContent() {
            Stack() {
              Scroll(this.scrollerForScroll) {
                Column() {
                  Image($r("app.media.scenery01")).width('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({
        barBottomMargin: 28,
        systemMaterialEffect:  {
          // 可根据设备材质能力动态替换为IMMERSIVE/SMOOTH
          materialType: hdsMaterial.MaterialType.ADAPTIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        }
      })
    }
    .mode(NavigationMode.Stack)
    .titleBar({
      content: {
        title: {
          mainTitle: 'MainTitle',
        },
        menu: this.menus,
      },
      style: {
        scrollEffectOpts: {
          enableScrollEffect: false,
          scrollEffectType: ScrollEffectType.GRADIENT_BLUR,
        },
        systemMaterialEffect: {
          materialType: hdsMaterial.MaterialType.ADAPTIVE,
          materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
        },
      },
      avoidLayoutSafeArea: false,
      enableComponentSafeArea: false
    })
    .bindToScrollable([this.scrollerForScroll])
    .hideBackButton(false)
    .titleMode(HdsNavigationTitleMode.MINI)
    .ignoreLayoutSafeArea([LayoutSafeAreaType.SYSTEM], [LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM])
  }
}

interface MenuItem {
  symbolGlyph: SymbolGlyphModifier,
  symbolGlyph1: SymbolGlyphModifier,
  label: string,
  defaultBgColor: ResourceColor,
  hoverBgColor: ResourceColor,
  pressBgColor: ResourceColor,
};

const MENU_CONFIG: MenuItem[] = [
  {
    symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.alarm_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.alarm_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.worldclock_fill_2')).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.worldclock_fill_2')).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.stopwatch_2')).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.stopwatch_2')).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 SystemMaterialParams 详细介绍

SystemMaterialParams是沉浸光感效果的核心配置对象，用于定义材质类型、级别等关键参数，直接决定沉浸光感的视觉表现，具体属性说明如下：

名称 类型 说明
materialType hdsMaterial.MaterialType 材质类型。可选值：NONE（无材质效果）、ADAPTIVE（自适应系统材质，默认沉浸式）、IMMERSIVE（沉浸材质，视觉效果更丰富，性能消耗略高）。
materialLevel hdsMaterial.MaterialLevel 材质级别。仅当materialType为IMMERSIVE时有效；可选值：ADAPTIVE（自适应，系统调整）、EXQUISITE（精致，最高视觉质量）、GENTLE（柔和，平衡效果与性能）；materialType为SMOOTH时此参数无效。
材质类型说明

  • NONE：无任何材质效果，组件呈现平面样式，适用于对性能要求极高或极简风格的应用。

  • ADAPTIVE：自适应系统材质，系统根据设备性能、屏幕亮度自动选择最优材质效果，兼顾体验与性能，是最推荐的默认配置。

  • IMMERSIVE：沉浸材质，提供最丰富的光影层次和视觉质感，适合高性能设备，低性能设备使用可能出现卡顿。

材质级别说明

  • ADAPTIVE：自适应级别，系统根据设备性能动态调整光影细节，平衡视觉效果与性能消耗。

  • EXQUISITE：精致级别，提供最高质量的光影渲染，细节最丰富，适合旗舰级设备。

  • GENTLE：柔和级别，光影效果适中，性能消耗较低，适合中端设备。

4. 喵屿APP悬浮页签与沉浸光感的实践

4.1 项目背景与需求

"喵屿"是一款专注于智能养宠陪伴的HarmonyOS应用，核心功能包括宠物健康记录、日常互动、库存管理等，其TimeLine页面是用户查看宠物成长记录、健康数据的核心入口。为提升页面视觉质感和交互体验，我们在该页面引入了HarmonyOS 6.1的悬浮页签与沉浸光感特性，同时需兼顾不同版本HarmonyOS设备的兼容性，确保低版本设备也能正常使用核心功能。

4.2 项目中的HdsTabs应用（含兼容性处理）

在喵屿项目的TimeLine页面中，我们使用HdsTabs组件实现底部页签的悬浮样式，同时应用沉浸光感效果，区分 "日记记录（Diary）" 和 "健康统计（Stat）" 两个核心模块，方便用户快速切换。同时添加API兼容性检查，针对不同版本的HarmonyOS做差异化处理。

typescript 复制代码 
// 导入设备信息模块，用于获取当前系统API版本，实现低版本兼容
import deviceInfo from '@ohos.deviceInfo';

// 初始化HdsTabs控制器：仅在API版本 >= 60100（对应HarmonyOS 6.1）时创建
// 低版本API不支持HdsTabs悬浮样式，避免创建控制器导致报错
private controller?: HdsTabsController =
  deviceInfo.distributionOSApiVersion >= 60100 ? new HdsTabsController() : undefined;

build() {
  NavDestination() {
    Column({space: 12}){
      // 自定义标题导航栏（项目自有组件，用于页面标题展示）
      this.titleNavigation()
      // API兼容性检查：仅在API版本 >= 60100时使用HdsTabs悬浮页签
      if (deviceInfo.distributionOSApiVersion >= 60100) {
        HdsTabs({ controller: this.controller }) {
          // 第一个页签：日记记录页面（DiaryView为项目自有组件）
          TabContent() {
            DiaryView({
              callBack: (childItem: DiaryShow) => {
                this.curRecordList = childItem
                this.showSheet = true
              }
            })
          }
          // 配置页签样式：图标+文本（Diary对应日记模块）
          .tabBar(new BottomTabBarStyle($r('app.media.ic_diary_tabs'), 'Diary'))

          // 第二个页签：健康数据页面（HealthDataView为项目自有组件）
          TabContent() {
            HealthDataView()
          }
          // 配置页签样式：图标+文本（Stat对应健康统计模块）
          .tabBar(new BottomTabBarStyle($r('app.media.statistics_tabs'), 'Stat'))

        }
        // 允许页签栏与内容区域重叠，实现悬浮效果
        .barOverlap(true)
        // 页签栏位于底部
        .barPosition(BarPosition.End)
        // 页签栏水平排列
        .vertical(false)
        // 为底部系统导航栏留出空间，避免遮挡
        .padding({ bottom: this.bottomHeight })
        // 核心：配置悬浮样式与沉浸光感
        .barFloatingStyle({
          // 页签栏分档宽度，适配不同屏幕尺寸的手机
          barWidth: { smallWidth: 200, mediumWidth: 300, largeWidth: 400 },
          // 页签栏与底部距离，控制悬浮高度，避免与系统导航栏冲突
          barBottomMargin: 60,
          // 渐变遮罩：增强悬浮层次感，同时弱化与内容的重叠感
          gradientMask: { maskColor: '#66F1F3F5', maskHeight: 92 },
          // 沉浸光感配置：沉浸材质+自适应级别，兼顾视觉与性能
          systemMaterialEffect: {
            materialType: hdsMaterial.MaterialType.IMMERSIVE,
            materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
          },
          // 页签栏透明度：0.9既保证视觉清晰，又增加通透感
          barOpacity: 0.9
          // 可选：开启迷你栏（本项目暂不启用，注释保留供后续扩展）
          // miniBar: {
          //   miniBarBuilder: () => this.miniBarBuilder()
          // }
        })
      } else {
        // 低版本API（<60100）：不显示悬浮页签，直接展示默认的日记记录页面
        // 确保低版本设备用户能正常使用核心功能，不影响基础体验
        DiaryView({
          callBack: (childItem: DiaryShow) => {
            this.curRecordList = childItem
            this.showSheet = true
          }
        })
      }
    }
  }
  // 其他页面配置（省略，如导航栏、生命周期等）
}

4.3 实践效果

通过在喵屿APP中应用悬浮页签与沉浸光感特性，我们实现了以下效果，显著提升了用户体验：

  • 视觉效果：悬浮页签与沉浸光感相辅相成，打造出分层、通透的视觉体验，让页面更具现代感和精致度，与喵屿APP"温馨、治愈"的产品调性高度契合。

  • 交互体验：页签切换流畅无卡顿，悬浮样式避免了传统底部页签对内容的遮挡，用户查看宠物记录、健康数据时更专注；同时，沉浸光感让页签栏更具辨识度，提升交互的反馈感。

  • 适配性：系统自适应的沉浸光感效果，确保在不同性能、不同尺寸的HarmonyOS设备上，都能获得一致且优质的显示效果，无需手动适配。

  • 兼容性：通过API版本判断实现低版本保护，低版本设备可正常使用核心功能，高版本设备可享受新特性带来的体验提升，兼顾了老用户与新用户的需求。

4.4 技术要点总结

结合喵屿APP的实践，总结出以下核心技术要点，供开发者参考：

  1. 控制器的合理使用：HdsTabsController是页签管理的核心，用于控制页签切换、状态查询等操作，初始化时需结合API版本判断，避免低版本设备报错。

  2. 悬浮样式的精细化配置 ：通过barFloatingStyle的各项参数（宽度、边距、渐变遮罩等），结合应用场景和设备尺寸进行适配，平衡视觉效果与实用性。

  3. 沉浸光感的适配策略：优先使用ADAPTIVE材质类型，兼顾体验与性能；若需自定义，需先查询设备材质能力，避免性能问题。

  4. 响应式设计 ：通过barWidth的分档配置，实现不同屏幕尺寸下的自适应布局，确保悬浮页签在手机、平板等设备上都能正常显示。

  5. API低版本保护 ：通过deviceInfo模块获取系统API版本，做条件判断，实现"高版本用新特性、低版本保基础"的兼容性方案，提升应用的覆盖范围。

5. 总结与展望

悬浮页签与沉浸光感 作为HarmonyOS 6.1版本HDS的核心特性，为应用UI设计提供了新的思路和可能性，其核心价值在于 提升视觉质感与优化交互体验------悬浮页签打破传统布局限制，增强页面层次感；沉浸光感通过材质渲染，为组件注入深度与质感，两者结合能让应用界面更具竞争力。

本文通过详细介绍两大特性的属性配置和实现方式，结合喵屿APP的实际项目案例，展示了特性从理论到落地的完整流程，包括核心代码实现、兼容性处理、样式适配等关键环节。开发者可参考本文的技术方案，根据自身应用的场景和需求，灵活配置悬浮页签与沉浸光感，无需复杂的自定义开发，即可快速提升应用的UI质感和用户体验。

在喵屿APP的实践中，我们深刻体会到，新特性的应用不仅要追求视觉效果，更要兼顾性能与兼容性------通过API低版本保护、自适应材质配置等手段，既能让高版本设备用户享受到新特性的优势，也能确保低版本设备用户的基础使用体验不受影响。这种**"兼顾体验与兼容"**的开发思路，也是HarmonyOS生态开发的核心要求之一。

随着HarmonyOS生态的不断完善，HDS将推出更多优质的UI组件和特性，为开发者提供更丰富的设计工具。未来，我们将继续探索HDS的其他功能，结合喵屿APP的产品需求，进一步优化界面设计和交互体验，比如将迷你栏与宠物快捷操作结合、优化沉浸光感与页面主题的适配等，让应用更贴合用户需求。

同时，也希望本文能为HarmonyOS开发者提供有价值的参考，助力更多开发者快速掌握悬浮页签与沉浸光感特性，打造出更多兼具美观与实用性的HarmonyOS应用，共同推动HarmonyOS生态的发展。

欢迎下载应用体验（搭载该功能的新版本将于近期上架）：喵屿下载链接

相关推荐
心走2 小时前
鸿蒙OpenGL ES渲染H264花屏问题
harmonyos
IntMainJhy3 小时前
Flutter 三方库 get_it + flutter_bloc 的鸿蒙化适配与实战指南
flutter·华为·harmonyos
maaath3 小时前
【maaath】Flutter for OpenHarmony 定位服务能力集成指南
flutter·华为·harmonyos
maaath3 小时前
【maaath】Flutter for OpenHarmony分类筛选与标签匹配深度剖析
flutter·华为·harmonyos
isyangli_blog5 小时前
华为企业级虚拟化解决方案
华为
说再见再也见不到5 小时前
华为交换机QoS配置一条龙：从基础模型到MQC实战
华为·交换机·qos·端口限速
Lanren的编程日记6 小时前
Flutter 鸿蒙应用快捷操作功能实战：快捷菜单+快捷手势+快捷键支持，打造高效操作体验
flutter·华为·harmonyos
memoryjs6 小时前
鸿蒙系统进一步学习（二）：ArkUI底层原理揭秘
学习·华为·harmonyos
木斯佳6 小时前
HarmonyOS 本地存储实战：用一个记账本案例吃透 RDB 与 KVStore
harmonyos·存储
热门推荐
01GitHub 镜像站点02近期有什么ai的新消息，新动态？ 2026.4月03Codex 接入 DeepSeek API 完整配置文档042026年4月AI大事件深度解读：大模型竞争进入“深水区“052026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot06【AI】2026 年具身智能模型和世界模型总结07在Windows 11上安装Docker的踩坑记录08零基础教你claude code 接入 deepseek V4092026年AI前瞻：量子AI、具身智能与科学发现的新纪元10VSCode + Copilot下：配置并使用 DeepSeek