# 沉浸光感搜索框的实现方式

#### 问题现象

如何实现沉浸光感搜索框效果？

#### 背景知识

1.  沉浸光感是HarmonyOS提供的一种系统级视觉效果能力，通过系统材质实现组件与背景的沉浸式融合呈现。
2.  HdsTabs组件支持通过barFloatingStyle属性设置浮动样式，结合hdsMaterial系统材质能力，可实现沉浸光感效果。
3.  HDS组件的沉浸光感能力从HarmonyOS 6.1.0（API 23）开始支持。
4.  通用组件（如Search）的systemMaterial属性从API Version 26.0.0开始支持。

#### 解决方案

方案一：使用HdsTabs浮动样式和系统材质能力实现（备选方案，不推荐）

API Version 26.0.0之前，可在tabBuilder中内嵌Search组件，借助HdsTabs的浮动样式和系统材质能力，呈现符合设计规范的沉浸光感效果。该方案实现较复杂，且耦合特定组件HdsTabs，灵活性较差，因此不推荐。参考文档。

```
import { HdsTabs, hdsMaterial } from '@kit.UIDesignKit';

@Entry
@Component
struct Index {
  build() {
    Column() {
      HdsSearch()
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    // $r('app.media.IMG')需要替换为开发者所需的图像资源文件。
    .backgroundImage($r("app.media.IMG"))
    .backgroundImageSize(ImageSize.FILL)
  }
}

@Component
struct HdsSearch {
  build() {
    HdsTabs() {
      TabContent() { }
        .tabBar(this.tabBuilder(0))
    }
    .barOverlap(true)
    .barPosition(BarPosition.End)
    .width('100%')
    .height(60)
    .barFloatingStyle({
      barBottomMargin: 2,
      barWidth: { smallWidth: 300, mediumWidth: 350, largeWidth: "100%" },
      gradientMask: { maskColor: '#00000000', maskHeight: 1 },
      systemMaterialEffect: {
        materialType: hdsMaterial.MaterialType.IMMERSIVE,
        materialLevel: hdsMaterial.MaterialLevel.EXQUISITE
      }
    })
  }

  @Builder
  tabBuilder(index: number) {
    Row() {
      Search({ value: "", placeholder: 'Type to search...', })
        .searchButton('SEARCH')
        .width('100%')
        .height("100%")
        .backgroundColor(Color.Transparent)
        .placeholderColor(Color.Grey)
        .onSubmit((value: string) => {
          // 处理搜索提交
        })
        .onChange((value: string) => {
          // 处理搜索内容变化
        })
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}
```

方案二：使用systemMaterial通用属性设置沉浸式系统材质（正式方案）

API Version 26.0.0之后，使用系统提供的沉浸式系统材质，所有支持通用属性的组件均支持通过systemMaterial通用属性设置沉浸式系统材质。该方案通用性强，不耦合特定组件，API级别支持，推荐使用。参考文档。

关键配置步骤：

1.  将Search组件放置在需要沉浸式融合的背景上。
2.  通过systemMaterial通用属性为Search组件设置沉浸式系统材质。
    
    ```
    import { uiMaterial } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct Index {
      controller: SearchController = new SearchController();
    
      build() {
        Stack() {
          // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。
          Image($r('app.media.IMG'));
          Search({ value: '', placeholder: 'Type to search...', controller: this.controller })
            .searchButton('SEARCH')
            .margin({ bottom: 100 })
            .width(260)
            .height(60)
            .borderRadius(28)
            .systemMaterial(new uiMaterial.ImmersiveMaterial({
              style: uiMaterial.ImmersiveStyle.ULTRA_THIN,
              interactive: true
            }));
        }.height('100%').width('100%');
      }
    }
    ```