鸿蒙应用开发 背景模糊效果的自定义TabBar实现案例

往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

1.嵌入式开发适不适合做鸿蒙南向开发？一文带你了解

2.鸿蒙众多岗位需求突增！该如何选择？

3.分享一场鸿蒙开发岗位面试经历~

4.待更新中……

介绍

在一些主页的场景中，为了实现更好的视觉体验，会给TabBar加上透明的背景模糊效果。本示例主要讲解如何使用系统提供的背景设置的能力，实现背景模糊的效果。

效果图预览

使用说明：

1. 上下滑动主页的图片，可以看到TabBar有透明模糊效果。

实现思路

1：使用backgroundBrightness和backgroundBlurStyleTabBar属性实现TabBar背景模糊效果

在自定义的TabBar实现中，添加backgroundBrightness和backgroundBlurStyleTabBar属性，实现透明模糊效果。其中backgroundBrightness 属性可以控制背景的亮度等效果，backgroundBlurStyleTabBar属性控制背景的透明度等效果。

2：实现底部TabBar页签的沉浸式效果

为了实现底部TabBar页签的沉浸式效果，需要在所有TabBar的嵌套路径中，添加expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) 的属性设置。

// 通过backgroundBrightness和backgroundBlurStyle实现底部tabBar的透明模糊效果
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
  ForEach(this.tabsInfoList, (item: TabInfo, tabIndex: number) => {
    // 单独一个TabBar组件
    TabItem({
      tabInfo: item,
      tabBarIndex: tabIndex,
      selectedIndex: $selectedIndex,
    })
  })
}
.backgroundBrightness({
  rate: 0.5,
  lightUpDegree: 0.5
})
.backgroundBlurStyle(BlurStyle.Thin, {
colorMode: ThemeColorMode.LIGHT,
adaptiveColor: AdaptiveColor.DEFAULT,
scale: 1
})
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) // 实现沉浸式效果

高性能知识点

注意：当前动态模糊效果会对应用功耗尝试较大影响，请结合实际情况谨慎使用。

工程结构&模块类型

backgroundblur                          // har类型
|---model
|   |---TabInfo.ets                     // 模型层-Tabbar数据类型
|---pages
|   |---CustomTabsComponent.ets         // 视图层-自定义Tab组件
|   |---TabsSample.ets                  // 视图层-构造的展示场景

模块依赖

不涉及。

参考资料

背景设置

Tabs组件

最后：

如果还有不知道从哪里开始入手了解鸿蒙开发技术、想要更深的掌握鸿蒙开发技术知识点的朋友们，或者是转行求职人员还在为面试问题而犯难的，可以动动手指进来参考一下针对‌鸿蒙开发学习‌而设计的系统性学习方案，涵盖基础入门到进阶实战项目相关学习文档：【鸿蒙开发学习指南】

这些内容是从初级>中级>高级的所有知识点，带你更快速了解基本编程逻辑，▶适合人群包括：零基础开发者、移动端转型者、物联网从业者、应届生/计算机专业。