HarmonyOS 沉浸式底部Tabs和MiniPlayer实现指南

在鸿蒙应用（API 23+ / HarmonyOS 6.1+，无权限的话需提工单申请权限API 23权限）中实现类似华为音乐的底部Tabs和MiniPlayer的沉浸光感效果，需综合运用ArkUI声明式开发范式和HDS材质能力，以下是经过验证的正确实现方案：

效果预览

上图展示了使用 HdsTabs + barFloatingStyle 实现的悬浮毛玻璃效果，TabBar 带有半透明背景和圆角，内容可延伸到TabBar下方。

一、沉浸式底部Tabs实现方案

1. 核心原理

• 使用 HdsTabs 组件 + barFloatingStyle 配置
• 关键点：通过 systemMaterialEffect 设置自适应材质，实现毛玻璃悬浮效果

2. 完整代码示例

import { HdsTabs, HdsTabsController } from '@kit.UIDesignKit'
import { hdsMaterial } from '@hms.hds.hdsMaterial'

interface TabItem {
  icon: Resource
  text: string
  index: number
}

@Component
export struct GlassmorphismTabBar {
  private controller: HdsTabsController = new HdsTabsController()
  @State currentIndex: number = 0
  private tabItems: TabItem[] = [
    { icon: $r('app.media.public_home_normal'), text: '首页', index: 0 },
    { icon: $r('app.media.public_home_normal'), text: '发现', index: 1 },
    { icon: $r('app.media.public_home_normal'), text: '消息', index: 2 },
    { icon: $r('app.media.public_home_normal'), text: '我的', index: 3 }
  ]

  build() {
    HdsTabs({ controller: this.controller, index: this.currentIndex }) {
      ForEach(this.tabItems, (item: TabItem) => {
        TabContent() {
          // 页面内容
          Column() {
            Text(`${item.text}页面`)
              .fontSize(24)
          }
          .width('100%')
          .height('100%')
          .justifyContent(FlexAlign.Center)
        }
        .tabBar(new BottomTabBarStyle(item.icon, item.text))
      }, (item: TabItem) => item.index.toString())
    }
    .barOverlap(true)  // 允许内容延伸到TabBar底部
    .barPosition(BarPosition.End)
    // 核心：开启悬浮样式 + 自适应材质（毛玻璃效果）
    .barFloatingStyle({
      barBottomMargin: 28,  // 底部间距（适配安全区）
      systemMaterialEffect: {
        materialType: hdsMaterial.MaterialType.ADAPTIVE,  // 自适应材质
        materialLevel: hdsMaterial.MaterialLevel.EXQUISITE // 精致级别（最强毛玻璃）
      }
    })
    .vertical(false)
    .onChange((index: number) => {
      this.currentIndex = index
    })
    .width('100%')
    .height('100%')
  }
}

3. 关键配置说明

barFloatingStyle 参数

• barBottomMargin: 底部间距，建议 28vp 适配安全区
• systemMaterialEffect: materialType: 材质类型（ADAPTIVE 自适应） materialLevel: 材质等级
  • EXQUISITE - 精致级（最强毛玻璃，推荐✨）
  • GENTLE - 温和级
  • SMOOTH - 平滑级

BottomTabBarStyle 用法

// 正确：直接使用，无需导入
.tabBar(new BottomTabBarStyle(icon, text))
// 不需要从任何模块导入 BottomTabBarStyle

4. 注意事项

• BottomTabBarStyle 是全局类，不需要导入
• 图标资源可以使用：
  • 系统Symbol：$r('sys.symbol.xxx')
  • 系统媒体：$r('sys.media.xxx')
  • 应用资源：$r('app.media.xxx')
• 必须使用 HdsTabs，普通 Tabs 不支持此特性
• API版本要求：需要 API 23+ / HarmonyOS 6.1+

二、MiniPlayer悬浮控件实现

1. MiniPlayer组件代码

import { hdsMaterial } from '@hms.hds.hdsMaterial'

@Component
export struct MiniPlayer {
  @State isPlaying: boolean = false
  @State currentProgress: number = 0
  @State musicTitle: string = '歌曲名称'

  build() {
    Column() {
      Row() {
        // 左侧：专辑封面
        Image($r('app.media.public_home_normal'))
          .width(40)
          .height(40)
          .borderRadius(4)
          .margin({ right: 12 })
        // 中间：歌曲信息 + 进度条
        Column({ space: 4 }) {
          Row() {
            Text(this.musicTitle)
              .fontSize(14)
              .fontColor('#333333')
              .fontWeight(FontWeight.Medium)
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .layoutWeight(1)
          }

          // 进度条
          Slider({ value: this.currentProgress, min: 0, max: 100 })
            .layoutWeight(1)
            .trackThickness(3)
            .selectedColor('#007DFF')
            .blockColor('#007DFF')
        }
        .layoutWeight(1)
        .margin({ right: 12 })
        // 右侧：播放/暂停按钮
        SymbolGlyph(this.isPlaying
          ? $r('sys.symbol.pause_fill')
          : $r('sys.symbol.play_fill'))
          .fontSize(24)
          .fontColor(['#333333'])
      }
      .width('100%')
      .padding({ left: 16, right: 16, top: 8, bottom: 8 })
      // 使用HDS材质效果实现毛玻璃光感
      .backgroundBlurStyle(BlurStyle.Thick, {
        colorMode: ThemeColorMode.LIGHT,
        adaptiveColor: AdaptiveColor.DEFAULT,
        scale: 1.0
      })
      .backgroundColor(Color.Transparent)
      .borderRadius(12)
      .shadow({
        radius: 8,
        color: 'rgba(0, 0, 0, 0.1)',
        offsetX: 0,
        offsetY: -2
      })
    }
    .width('100%')
    .padding({ bottom: 28 }) // 底部安全区间距
  }
}

2. 布局方案

Column() {
  // 主内容区（可滚动）
  Scroll() { ... }

  // MiniPlayer 悬浮播放控件（使用HDS光感）
  MiniPlayer()
    .width('100%')
    .padding({ left: 12, right: 12, top: 8, bottom: 0 })

  // 毛玻璃TabBar
  GlassmorphismTabBar()
    .layoutWeight(1)
}

3. 特性说明

• HDS光感材质：使用 .backgroundBlurStyle(BlurStyle.Thick) 替代简单半透明，实现真实模糊背景
• 视觉统一：与 TabBar 采用相同的光感技术，确保整体风格一致性
• 圆角设计：borderRadius(12) 提升视觉体验
• 阴影效果：shadow 增强悬浮感
• 安全区适配：padding({ bottom: 28 }) 适配底部安全区

三、完整实现路径

1. 项目结构

entry/src/main/ets/
├── views/
│   ├── GlassmorphismTabBar.ets    # 毛玻璃TabBar组件
│   ├── ImmersiveTabBar.ets        # 基础TabBar组件
│   └── MiniPlayer.ets             # 光感悬浮播放控件
└── pages/
    ├── GlassTabPage.ets           # 毛玻璃示例页面（含MiniPlayer）
    └── ImmersiveTabPage.ets       # 基础示例页面

2. 使用步骤

a. 创建 TabBar 组件（参考 GlassmorphismTabBar.ets） b. 在页面中引入

{ GlassmorphismTabBar } from '../views/GlassmorphismTabBar'

@Entry
@Component
struct MyPage {
  build() {
    Column() {
      // 页面内容
      GlassmorphismTabBar()
        .layoutWeight(1)
    }
  }
}

欧克啊。谢谢大佬

沉浸光感可以参考HdsTab，但是目前三方自定义组件暂时是不支持使用沉浸光感功能，具体内容可以前往开发者文档中心的HdsTab查看参考