HarmonyOS鸿蒙Next中自定义布局按钮等如何实现沉浸光感效果

是的

之前写的一段代码供你参考，看下是否有帮助。

struct Index {
  @StorageLink('bottomTabIndex') bottomTabIndex: number = 0;
  private hdsController: HdsTabsController = new HdsTabsController();
  private tabsController: TabsController = new TabsController();

  aboutToAppear(): void {
    if (!AppStorage.has('recentRefreshCounter')) {
      AppStorage.setOrCreate('recentRefreshCounter', 0);
    }
    if (!AppStorage.has('myShortcutsRefreshCounter')) {
      AppStorage.setOrCreate('myShortcutsRefreshCounter', 0);
    }
   
    if (!AppStorage.has('app_first_launch_done')) {
      AppStorage.setOrCreate('app_first_launch_done', true);
      this.bottomTabIndex = 1;
    } else if (!AppStorage.has('bottomTabIndex')) {
      AppStorage.setOrCreate('bottomTabIndex', 1);
    }
    const pendingTab = AppStorage.get<number>('pendingBottomTabIndex');
    if (pendingTab !== undefined && pendingTab !== null) {
      this.bottomTabIndex = pendingTab;
    }
    setTimeout(() => {
      AppLaunchRouter.consumePendingNavigation(this.getUIContext());
    }, 350);

    const ctx = this.getUIContext().getHostContext() as common.UIAbilityContext;
    PdfResourceService.refreshManifestIfNeeded(ctx, false).catch(() => {
    });
    IndicatorResourceService.refreshIfNeeded(ctx, false).catch(() => {
    });
  }

  @Builder
  tabContentBuilder(color: Color) {
    List() {
      ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item: number) => {
        ListItem() {
          Column() {
            Row() {
            }.height(200)
            .width('100%')

            Row() {
            }.width('100%')
            .height(50)
            .background(color)
          }
        }
      })
    }
  }

  @Builder
  TabBuilder(index: number, name: string) {
    Column() {
      if (index === 4) {
        SymbolGlyph($r('sys.symbol.person'))
          .fontSize(24)
          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
          .fontColor([this.bottomTabIndex === index ?
            $r('app.color.bottom_tabs_font_color_selected') :
            $r('app.color.bottom_tabs_font_color')])
          .opacity(this.bottomTabIndex === index ? 1 : 0.6)
      } else {
        Image(this.bottomTabIndex === index ? BottomTabsList[index].iconSelected : BottomTabsList[index].icon)
          .width('40%')
          .height('40%')
          .objectFit(ImageFit.Contain)
      }

      Text(BottomTabsList[index].text)
        .fontSize($r('app.float.bottom_font_size'))
        .opacity(0.6)
        .fontColor(this.bottomTabIndex === index ?
        $r('app.color.bottom_tabs_font_color_selected') : $r('app.color.bottom_tabs_font_color'))
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .border({ width: { top: 0.5 } })
  }

  build() {
    Column() {
      if (deviceInfo.distributionOSApiVersion >= 60100) {
        HdsTabs({ index: this.bottomTabIndex, controller: this.hdsController }) {
          TabContent() {
            YuTabs()
          }
          .tabBar(new BottomTabBarStyle(this.bottomTabIndex === 0 ? $r('app.media.chadinge_selected') : $r('app.media.chadinge'), '查询'))

          TabContent() {
            SuanTabs()
          }
          .tabBar(new BottomTabBarStyle(this.bottomTabIndex === 1 ? $r('app.media.Budget_selected') : $r('app.media.Budget'), '计算'))

          TabContent() {
            ZhiBiaoTabs()
          }
          .tabBar(new BottomTabBarStyle(this.bottomTabIndex === 2 ? $r('app.media.formal_selected') : $r('app.media.formal'), '指标'))

          TabContent() {
            VoicePage()
          }
          .tabBar(new BottomTabBarStyle(this.bottomTabIndex === 3 ? $r('app.media.ic_mic_active') : $r('app.media.ic_mic'), '语音查'))

          TabContent() {
            MyTab()
          }
          .tabBar(new BottomTabBarStyle({
            normal: new SymbolGlyphModifier($r('sys.symbol.person'))
              .fontSize(24)
              .renderingStrategy(SymbolRenderingStrategy.SINGLE)
              .fontColor([$r('app.color.bottom_tab_my_icon_off')]),
            selected: new SymbolGlyphModifier($r('sys.symbol.person'))
              .fontSize(24)
              .renderingStrategy(SymbolRenderingStrategy.SINGLE)
              .fontColor([$r('app.color.bottom_tabs_font_color_selected')]),
          }, '我的').labelStyle({
            unselectedColor: $r('app.color.bottom_tabs_font_color'),
            selectedColor: $r('app.color.bottom_tabs_font_color_selected'),
          }))
        }
        .barOverlap(true)
        .barPosition(BarPosition.End)
        .vertical(false)
        .barFloatingStyle({
          barWidth: { smallWidth: 320, mediumWidth: 400, largeWidth: 480 },
          barBottomMargin: 28,
          gradientMask: { maskColor: $r('app.color.tab_bar_mask'), maskHeight: 92 },
          systemMaterialEffect: {
            materialType: hdsMaterial.MaterialType.IMMERSIVE,
            materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
          },
        })
        .onChange((index: number) => {
          this.bottomTabIndex = index;
        })
      } else {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.End, justifyContent: FlexAlign.End }) {
          Tabs({ barPosition: BarPosition.End, index: this.bottomTabIndex, controller: this.tabsController }) {
            TabContent() {
              YuTabs()
            }.tabBar(this.TabBuilder(0, '查'))
            TabContent() {
              SuanTabs()
            }.tabBar(this.TabBuilder(1, '算'))
            TabContent() {
              ZhiBiaoTabs()
            }.tabBar(this.TabBuilder(2, '指标'))
            TabContent() {
              VoicePage()
            }.tabBar(this.TabBuilder(3, '语音'))
            TabContent() {
              MyTab()
            }.tabBar(this.TabBuilder(4, '我'))
          }
          .width('100%')
          .vertical(false)
          .barHeight('8%')
          .scrollable(true)
          .onChange((index: number) => {
            this.bottomTabIndex = index;
          })
          .onAnimationStart((index: number, targetIndex: number) => {
            if (index !== targetIndex) {
              this.bottomTabIndex = targetIndex;
            }
          })
          .height('100%')
        }
        .width('100%')
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.bgcolor'))
  }
}

在 HarmonyOS Next 中，自定义布局按钮或搜索框要模拟系统的沉浸光感效果（毛玻璃 / 背景模糊），核心是使用 backgroundBlurStyle 属性。

// 示例：自定义按钮实现光感
Button('沉浸按钮')
  .backgroundColor('rgba(255,255,255,0.2)')   // 半透明底色
  .backgroundBlurStyle(BlurStyle.Thick)       // 厚模糊，融入背景光感
  .borderRadius(20)

// 搜索框实现同样效果
Search({ placeholder: '搜索' })
  .backgroundColor('rgba(255,255,255,0.15)')
  .backgroundBlurStyle(BlurStyle.Regular)     // 或 Thick / Thin
  .borderRadius(24)

如果需要更强的光感层次，可以叠加 blendEffect：

Button('带光效')
  .backgroundBlurStyle(BlurStyle.BackgroundRegular)
  .blendEffect(BlendEffectStyle.Light)  // 增强光感

BlurStyle 枚举包含 Thin、Regular、Thick，另有 Background 系用于与壁纸交融。系统应用市场搜索框正是基于 Search 组件加 backgroundBlurStyle，并非独立控件，只需为 Search 组件设置该属性即可。