【HarmonyOS NEXT】鸿蒙开发：搜索栏历史记录以及删除记录

实现效果

准备数据

// 状态变量，存储音乐名称的数组
  @State music: string[] =
    ['句号', '泡沫', '星星', '奢香夫人', '虹之间', '奢香夫人', '倒数', '最佳损友', '富士山下', 'Sweet Dreams']
  // 状态变量，用于控制管理模式的开关
  @State isManage: boolean = false

 搜索框

 一个搜索框，用户可以输入关键字进行搜索。

 // 搜索框
      Search({ placeholder: '请输入关键字...' })  // 搜索框配置，设置占位提示文本
      .searchButton('搜索')  // 设置搜索按钮的文本
      .width(300)  // 设置搜索框宽度
      .height(40)  // 设置搜索框高度
      .backgroundColor('#F5F5F5')  // 设置搜索框背景颜色
      .onSubmit((value: string) => {  // 定义搜索提交时的回调函数
          this.music.unshift(value)  // 将搜索值添加到音乐数组的开头
        })

搜索历史记录的展示

一行文本，分别显示"搜索历史"和一个根据 isManage 状态切换显示"管理"或"关闭管理"的文本，点击该文本可以切换 isManage 的状态。

通过Flex布局和循环，为每个音乐名称创建一个 Chip 元素。Chip 元素具有特定的标签文本样式、尺寸、是否允许关闭等属性，并且这些属性会根据 isManage 的状态进行相应的调整。

 

      Row() {  // 行布局
        Text('搜索历史')  // 显示"搜索历史"文本
        Text(this.isManage? '关闭管理' : '管理')  // 根据管理状态显示相应文本
         .onClick(() => {  // 点击文本时的回调函数
            this.isManage =!this.isManage  // 切换管理状态
          })
      }
     .width('90%')  // 设置行宽度为 90%
     .justifyContent(FlexAlign.SpaceBetween)  // 设置行内元素两端对齐

      Flex({ wrap: FlexWrap.Wrap }) {  // 弹性布局，允许换行
        ForEach(this.music, (item: string) => {  // 遍历音乐数组
          Row() {  // 行布局
            Chip({  // 芯片组件配置
              label: {  // 标签配置
                text: item,  // 标签文本
                fontSize: 12,  // 字体大小
                fontColor: Color.Blue,  // 字体颜色
                fontFamily: "HarmonyOS Sans",  // 字体家族
                labelMargin: { left: 10, right: 10 }  // 标签边距
              },
              size: ChipSize.SMALL,  // 芯片尺寸为小
              allowClose: this.isManage,  // 是否允许关闭，取决于管理状态
              enabled: true,  // 启用状态
              backgroundColor: $r('sys.color.ohos_id_color_button_normal'),  // 背景颜色
              borderRadius: $r('sys.float.ohos_id_corner_radius_button'),  // 边框圆角
              onClose: () => {  // 关闭芯片时的回调函数
                console.log("chip on close")
              },
              onClicked: () => {  // 点击芯片时的回调函数
                console.log("chip on clicked")
                //TODO 搜索label的内容
              }
            })
          }.padding(5)  // 设置内边距为 5
        })
      }
     .padding({ left: 5, right: 5 })  // 整体设置左右内边距为 5

完整代码

import { Chip, ChipSize } from '@kit.ArkUI';

/**
 * Index 组件结构体
 */
@Entry
@Component
struct Index {
  /**
   * 状态变量，存储音乐名称的数组
   */
  @State music: string[] =
    ['句号', '泡沫', '星星', '奢香夫人', '虹之间', '奢香夫人', '倒数', '最佳损友', '富士山下', 'Sweet Dreams']
  /**
   * 状态变量，用于控制管理模式的开关
   */
  @State isManage: boolean = false

  /**
   * 构建组件的方法
   */
  build() {
    Column({ space: 10 }) { // 列布局，设置间距为 10
      // 搜索框
      Search({ placeholder: '请输入关键字...' })// 搜索框配置，设置占位提示文本
        .searchButton('搜索')// 设置搜索按钮的文本
        .width(300)// 设置搜索框宽度
        .height(40)// 设置搜索框高度
        .backgroundColor('#F5F5F5')// 设置搜索框背景颜色
        .onSubmit((value: string) => { // 定义搜索提交时的回调函数
          this.music.unshift(value) // 将搜索值添加到音乐数组的开头
        })

      Row() { // 行布局
        Text('搜索历史') // 显示"搜索历史"文本
        Text(this.isManage ? '关闭管理' : '管理')// 根据管理状态显示相应文本
          .onClick(() => { // 点击文本时的回调函数
            this.isManage = !this.isManage // 切换管理状态
          })
      }
      .width('90%') // 设置行宽度为 90%
      .justifyContent(FlexAlign.SpaceBetween) // 设置行内元素两端对齐

      Flex({ wrap: FlexWrap.Wrap }) { // 弹性布局，允许换行
        ForEach(this.music, (item: string) => { // 遍历音乐数组
          Row() { // 行布局
            Chip({
              // 芯片组件配置
              label: {
                // 标签配置
                text: item, // 标签文本
                fontSize: 12, // 字体大小
                fontColor: Color.Blue, // 字体颜色
                fontFamily: "HarmonyOS Sans", // 字体家族
                labelMargin: { left: 10, right: 10 }  // 标签边距
              },
              size: ChipSize.SMALL, // 芯片尺寸为小
              allowClose: this.isManage, // 是否允许关闭，取决于管理状态
              enabled: true, // 启用状态
              backgroundColor: $r('sys.color.ohos_id_color_button_normal'), // 背景颜色
              borderRadius: $r('sys.float.ohos_id_corner_radius_button'), // 边框圆角
              onClose: () => { // 关闭芯片时的回调函数
                console.log("chip on close")
              },
              onClicked: () => { // 点击芯片时的回调函数
                console.log("chip on clicked")
                //TODO 搜索label的内容
              }
            })
          }.padding(5) // 设置内边距为 5
        })
      }
      .padding({ left: 5, right: 5 }) // 整体设置左右内边距为 5
    }
    .width('100%') // 列布局宽度为 100%
  }
}