HarmonyOS鸿蒙Next中沉浸光感搜索框实现

HarmonyOS鸿蒙Next中沉浸光感搜索框实现 大家好，想做一个搜索框，需要加上沉浸光感该怎么实现？

10 回复

简单封装一个：

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

@Entry
@Component
struct Index {

      build() {
            Column() {
                  Column() {
                          HdsSearch()
                  }
                  .justifyContent(FlexAlign.Center)
                  .width('100%')
                  .height('100%')
                  .backgroundImage($r("app.media.bg2"))
                  .backgroundImageSize(ImageSize.FILL)
            }
      }

}

/**
 * 沉浸光感搜索框实现
 */
@Component
struct HdsSearch {

      build() {
            HdsTabs() {
                    TabContent() { }
                    .tabBar(this.tabBuilder(0))
            }
            .barOverlap(true)
            .barPosition(BarPosition.End)
            .vertical(false)
            .width('100%')
            .height(56 + 4)
            .divider({ mode: DividerMode.NONE })
            .barFloatingStyle({
                    barBottomMargin: 2,
                    //barWidth 用百分比好像有问题
                    barWidth: { smallWidth: 300, mediumWidth: 350, largeWidth: "100%" },
                    gradientMask: { maskColor: '#00000000', maskHeight: 1 },
                    systemMaterialEffect: {
                            materialType: hdsMaterial.MaterialType.IMMERSIVE,
                            materialLevel: hdsMaterial.MaterialLevel.EXQUISITE
                    }
            })

            // .backgroundColor(Color.Pink)
      }

      @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)
      }

}

cke_969.png

更多关于HarmonyOS鸿蒙Next中沉浸光感搜索框实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


学到了，

学习了

可以参考视效效果自定义相关控件：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-visual-effect

分别提供了点光源效果、按压阴影、边缘流光、背景流光等效果，可以根据自己的实际需求去结合使用。

HarmonyOS的社区里有很多技术大牛分享经验，学到了很多有用的知识。

沉浸光感-UI Design Kit（UI设计套件）-应用框架 - 华为HarmonyOS开发者

TabContent里放搜索框试试效果吧

cke_1437.png

同问，

在 HarmonyOS Next 中，沉浸光感搜索框使用 ArkUI 的声明式语法实现。核心思路：采用 Stack 容器叠加 Canvas 组件与 TextInput；Canvas 绘制径向渐变并绑定 animateTo 实现光晕呼吸动画；TextInput 设置透明背景，借助 .clip 和 .borderRadius 实现圆角，不定义边框色。通过状态变量控制动画循环，达到沉浸式光感效果。

在 HarmonyOS Next 中实现沉浸光感搜索框，核心是利用 背板模糊 与 渐变光晕 叠加。将搜索框放置在一个设置了 backdropBlur 和 linearGradient 的容器内，即可对底层内容进行模糊处理并叠加上柔和的光感渐变。

@Entry
@Component
struct ImmersiveSearch {
  @State searchValue: string = ''

  build() {
    Stack() {
      // 被模糊的底层内容，实际开发中替换为自己的页面内容
      Image($r('app.media.background'))
        .width('100%').height('100%')
        .objectFit(ImageFit.Cover)

      // 光感搜索框容器
      Row() {
        Search({ value: $$this.searchValue, placeholder: '搜索' })
          .width('90%')
          .height(44)
          .borderRadius(22)
          .backgroundColor(Color.White)
          .opacity(0.9)
      }
      .width('100%')
      .padding({ left: 16, right: 16 })
      .backdropBlur(12)                // 背板模糊，数值越大模糊越强
      .linearGradient({
        angle: 135,
        colors: [
          ['rgba(224,247,250,0.2)', 0.0],
          ['rgba(255,255,255,0.6)', 0.4],
          ['rgba(225,190,231,0.2)', 1.0]
        ]
      })
    }
    .width('100%').height('100%')
  }
}

关键点说明：

  • backdropBlur：对 Stack 内下层的图片（实际页面内容）进行模糊，形成毛玻璃底。
  • linearGradient：叠加一层淡入淡出的彩色渐变，模拟环境光感，可自由调整起止颜色与透明度。
  • 搜索框本身保持半透明白底，让模糊与渐变穿透可见。

这样无需额外设计资源，仅用系统效果即可为搜索栏赋予沉浸光感。

牛

回到顶部