HarmonyOS 鸿蒙Next中想要实现类似QQ音乐中搜索框的效果

HarmonyOS 鸿蒙Next中想要实现类似QQ音乐中搜索框的效果 【问题描述】我想要实现类似QQ音乐中搜索框的效果，应该怎么实现？

【问题现象】

cke_2310.png


更多关于HarmonyOS 鸿蒙Next中想要实现类似QQ音乐中搜索框的效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

尊敬的开发者，您好！请问您是在什么样的业务场景中使用该能力，交互流程是怎样的，在哪一个环节遇到了问题？方便说明能力不满足可能带来的影响：什么时间用到？是否高频？有无三方库可以做到？若提供该能力，是否会造成大工作量返工？请您注意提供的内容不要包含您或第三方的非公开信息，如给您带来不便，敬请谅解。

更多关于HarmonyOS 鸿蒙Next中想要实现类似QQ音乐中搜索框的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


业务场景：要全面适配沉浸光感，但 titleBar 下方放的搜索框因为无法设置材质现在显的格格不入。

时间：越快越好

频率：高

三方库实现：目前未发现

HarmonyOS UI设计指南：HDS组件与材质

概述

HDS（HarmonyOS Design System）提供了一套完整的UI组件和材质系统，帮助开发者快速构建一致、美观且高效的用户界面。

核心概念

组件库

HDS组件库包含多种常用UI元素，如按钮、输入框、列表、对话框等。所有组件遵循统一的设计规范，确保不同应用间的视觉一致性。

材质体系

材质系统定义了界面中的颜色、字体、阴影等视觉属性。HDS提供了一套完整的材质变量，支持深色模式和浅色模式自动适配。

主要组件

按钮

  • 主要按钮：用于最重要的操作。
  • 次要按钮：用于次要操作或备选方案。
  • 文本按钮：用于低强调度操作。

输入框

  • 单行输入框：用于短文本输入。
  • 多行输入框：用于长文本输入。
  • 搜索框：内置搜索图标和清除功能。

列表

  • 基础列表：展示文本内容。
  • 图标列表：带图标的列表项。
  • 滑动列表：支持滑动操作（如删除、收藏）。

对话框

  • 确认对话框：提示用户进行确认操作。
  • 输入对话框：允许用户输入信息。
  • 选择对话框：提供选项供用户选择。

使用说明

色彩系统

  • 主色：应用的主色调，用于强调重要元素。
  • 背景色：界面背景颜色。
  • 文字色：文字内容颜色，分主、次、辅助三级。

字体规范

  • 标题字体：用于页面标题和重要栏目。
  • 正文字体：用于主体内容。
  • 辅助字体：用于注释和次要信息。

间距规范

  • 基础间距：8dp为单位，所有间距均应为此值的整数倍。
  • 组件内边距：组件内容与边框之间的距离。
  • 组件外边距：组件与相邻元素之间的距离。

最佳实践

  1. 一致性：在同一应用中，相同类型的组件应保持一致的视觉表现。
  2. 可访问性：确保组件在不同设备、不同屏幕尺寸下均能正常使用。
  3. 性能优化：合理使用组件，避免过度渲染影响性能。

常见问题

Q：如何自定义组件样式？ A：可以通过覆盖材质变量实现自定义，但建议保持与HDS设计规范的一致性。

Q：组件是否支持深色模式？ A：是的，HDS所有组件均支持深色模式自动适配。

Q：如何获取最新版本？ A：请参考官方文档和更新日志，获取最新的组件和材质版本。

注：具体组件的使用方法和代码示例，请参考官方API文档。

这个我知道，但这个不是用在标题栏和底部页签的吗？我是想要在Search组件实现这个效果

cke_689.png

在HarmonyOS Next中实现搜索框效果，可使用Search组件或自定义TextInput结合Button。Search组件内置搜索图标和清除按钮，设置placeholder和onSubmit事件即可。若需更灵活样式，用TextInput监听输入，配合状态管理显示历史记录或联想列表，通过Stack布局实现下拉层叠效果。

在HarmonyOS Next中实现类似QQ音乐焦点态搜索框效果，关键点在于组件焦点状态监听与属性动画结合。

核心实现思路：

  1. 基础组件：使用Search或TextInput组件作为基础。
  2. 焦点监听：通过.onBlur()和.onFocus()回调捕获焦点变化。
  3. 状态变量：定义状态变量（如@State）记录当前是否获得焦点。
  4. 属性动画：使用.animateTo()隐式动画或animation()显式动画，根据焦点状态动态修改组件的width、borderRadius（圆角）、backgroundColor、borderColor、shadow（阴影）及内部图标（如放大镜）的样式。

示例代码片段：

@State isFocused: boolean = false;
@State inputValue: string = '';

build() {
  Column() {
    TextInput({ placeholder: '搜索...', text: this.inputValue })
      .onFocus(() => {
        animateTo({ duration: 200 }, () => {
          this.isFocused = true;
        });
      })
      .onBlur(() => {
        animateTo({ duration: 200 }, () => {
          this.isFocused = false;
        });
      })
      .width(this.isFocused ? '90%' : '80%')
      .height(40)
      .borderRadius(this.isFocused ? 20 : 8)
      .backgroundColor(this.isFocused ? '#FFFFFF' : '#F2F2F2')
      .borderColor(this.isFocused ? '#6200EE' : '#D9D9D9')
      .borderWidth(1)
      .placeholderColor(Color.Gray)
      .fontColor(Color.Black)
      .padding({ left: 16 })
      .margin({ top: 20 })
  }
  .width('100%')
  .alignItems(HorizontalAlign.Center)
}

补充说明：

  • 如需深色背景+放大镜图标效果，可嵌套Row包裹Image（图标）与TextInput。
  • 圆角变化需与width动画同步，否则出现拉伸感。
  • QQ音乐效果中的“放大镜进入输入框内部”可通过position与offset结合焦点态移动图标位置实现。
回到顶部