HarmonyOS鸿蒙NEXT背景模糊效果的自定义TabBar实现案例

HarmonyOS鸿蒙NEXT背景模糊效果的自定义TabBar实现案例 HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/backgroundblur

本案例已上架HarmonyOS NEXT开源组件市场，如需获取或移植该案例，可安装此插件。开发者可使用插件获取鸿蒙组件，添加到业务代码中直接编译运行。

介绍

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

效果图预览

效果图预览

使用说明：

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

实现思路

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

在自定义的TabBar实现中，添加backgroundBrightness和backgroundBlurStyleTabBar属性，实现透明模糊效果。其中backgroundBrightness属性可以控制背景的亮度等效果，backgroundBlurStyleTabBar属性控制背景的透明度等效果（详细介绍参考官方资料）。

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

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

具体代码可参考CustomTabsComponent.ets。

// 通过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                    // 视图层-构造的展示场景

模块依赖

不涉及。

参考资料


更多关于HarmonyOS鸿蒙NEXT背景模糊效果的自定义TabBar实现案例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙NEXT中，实现背景模糊效果的自定义TabBar可以通过以下步骤进行：

  1. 创建自定义TabBar组件：首先，创建一个自定义的TabBar组件。可以使用@Component装饰器来定义组件，并在build方法中构建UI结构。

  2. 添加背景模糊效果：使用BackdropBlur组件来实现背景模糊效果。BackdropBlur组件可以将指定区域的背景进行模糊处理。可以通过设置blurRadius属性来控制模糊程度。

  3. 布局与样式：在自定义TabBar组件中，使用Stack组件来布局TabBar和背景模糊层。将背景模糊层放置在TabBar的下方，确保TabBar的UI元素能够显示在模糊背景之上。

  4. 交互与状态管理：为TabBar中的每个Tab项添加点击事件，并通过状态管理来切换当前选中的Tab项。可以使用@State装饰器来管理TabBar的选中状态。

  5. 动态调整模糊效果：可以根据需要动态调整背景模糊效果，例如在Tab切换时改变模糊程度或模糊区域。

以下是一个简单的代码示例：

@Component
struct CustomTabBar {
  @State currentIndex: number = 0;

  build() {
    Stack() {
      // 背景模糊层
      BackdropBlur({ blurRadius: 10 })
        .width('100%')
        .height(80)
        .backgroundColor('#FFFFFF80'); // 半透明白色背景

      // TabBar UI
      Row() {
        ForEach([0, 1, 2], (index) => {
          Text(`Tab ${index + 1}`)
            .fontSize(16)
            .fontColor(this.currentIndex === index ? '#007AFF' : '#000000')
            .onClick(() => {
              this.currentIndex = index;
            })
            .margin(10);
        });
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height(80);
    }
    .width('100%')
    .height(80)
    .align(Alignment.Bottom);
  }
}

通过以上步骤，可以在HarmonyOS鸿蒙NEXT中实现带有背景模糊效果的自定义TabBar。

更多关于HarmonyOS鸿蒙NEXT背景模糊效果的自定义TabBar实现案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙NEXT中，可以通过自定义TabBar实现背景模糊效果。首先，使用@ohos.agp.components.TabList创建TabBar，然后在布局中设置backgroundBlurStyle属性为BlurStyle.LIGHT或BlurStyle.DARK来应用模糊效果。通过setTabContent方法自定义每个Tab的内容，并使用setOnTabSelectedListener处理Tab切换事件。示例代码如下：

TabList tabList = (TabList) findComponentById(ResourceTable.Id_tabList);
tabList.setBackgroundBlurStyle(BlurStyle.LIGHT);
tabList.setTabContent(ResourceTable.Layout_custom_tab_content);
tabList.setOnTabSelectedListener((index, tab) -> {
    // 处理Tab切换
});

通过这种方式，可以轻松实现带有背景模糊效果的自定义TabBar。

回到顶部