前言打开 HarmonyOS 的设置、图库、文件、应用市场，你会发现它们的底部导航栏有一个共同特点：悬浮在内容之上，带有毛玻璃模糊效果，内容可以从底部穿过。这不是简单的固定底栏，而是 HarmonyOS Design System (HDS) 提供的 Floating TabBar 能力。很多开发者在实现底部导航时，会选择手写一个固定在底部的 Row + 图标——这能用，但和官方效果差距明显。本文将带你用 HDS 原生组件HdsTabs实现真正的 Floating TabBar，并记录我们在真机调试中踩过的每一个坑。一、目标与 Benchmark我们的目标不是"做一个底部导航"，而是建立一个可复用的 Floating TabBar AppShell，以官方应用为 Benchmark：Benchmark 应用我们要对齐的点设置悬浮材质、模糊背景、点击反馈图库内容穿过 TabBar、渐变遮罩文件Tab 切换、页面栈独立应用市场MiniBar、展开/折叠动画华为主题Safe Area、横竖屏适配二、技术选型：为什么不用手写底栏方案优点缺点手写 Row + 图标完全自定义没有模糊材质、没有系统反馈、没有 Safe AreaArkUI Tabs基础能力没有悬浮样式、没有 MiniBarHdsTabs + barFloatingStyle官方原生、模糊材质、MiniBar、Safe Area 一体化API 较复杂答案很明确：用 HdsTabs。手写底栏意味着你要自己处理模糊材质、Safe Area、系统点击反馈、展开折叠动画——这些 HDS 都已经做好了。三、核心实现：HdsTabs + Floating Style3.1 基础结构@Component struct FloatingTabBarShell { @State currentIndex: number = 0 private controller: TabsController = new TabsController() private homeScroller: Scroller = new Scroller() private exploreScroller: Scroller = new Scroller() private libraryScroller: Scroller = new Scroller() private profileScroller: Scroller = new Scroller() aboutToAppear() { this.controller.bindScroller(0, this.homeScroller) this.controller.bindScroller(1, this.exploreScroller) this.controller.bindScroller(2, this.libraryScroller) this.controller.bindScroller(3, this.profileScroller) } build() { Tabs({ index: this.currentIndex, controller: this.controller }) { TabContent() { TabPage({ scroller: this.homeScroller, tabName: 'Home' }) } TabContent() { TabPage({ scroller: this.exploreScroller, tabName: 'Explore' }) } TabContent() { TabPage({ scroller: this.libraryScroller, tabName: 'Library' }) } TabContent() { TabPage({ scroller: this.profileScroller, tabName: 'Profile' }) } } .barPosition(BarPosition.End) .barOverlap(true) .barFloatingStyle({ barWidth: 300, barSideMargin: 40, barBottomMargin: 28, gradientMask: { color: '#66F1F3F5', height: 92 } }) .barBackgroundBlurStyle(BlurStyle.Thick, { colorStrategy: BlurStrategy.ADAPTIVE })
