鸿蒙 NEXT 开发案例：颜文字搜索器

// 引入必要的工具库 util 用于文本解码等操作import { util } from '@kit.ArkTS'// 引入 BusinessError 类用于处理业务逻辑错误import { BusinessError } from '@kit.BasicServicesKit'// 引入 inputMethod 模块用于管理输入法行为import { inputMethod } from '@kit.IMEKit' // 定义一个可以被观察的数据模型 EmoticonBean 表示单个表情符号的信息@ObservedV2class EmoticonBean {  // 定义风格属性，并初始化为空字符串  style: string = ""  // 定义类型属性，并初始化为空字符串  type: string = ""  // 定义表情符号本身，并初始化为空字符串  emoticon: string = ""  // 定义含义属性，并初始化为空字符串  meaning: string = ""   // 构造函数，允许在创建对象时设置上述属性  constructor(style: string, type: string, emoticon: string, meaning: string) {    this.style = style    this.type = type    this.emoticon = emoticon    this.meaning = meaning  }   // 定义是否显示的表情符号状态标记，默认为 true，使用 @Trace 装饰器使其可追踪变化  @Trace isShown: boolean = true} // 使用 @Entry 和 @Component 装饰器定义 Index 组件作为应用入口@Entry@Componentstruct Index {  // 定义一个状态变量 textInput 用于存储搜索框中的文本内容，默认为空字符串  @State private textInput: string = ''  // 定义一个状态变量 emoticonList 用于存储表情符号列表，默认为空数组  @State private emoticonList: EmoticonBean[] = []   // 定义线条颜色属性  private lineColor: string = "#e6e6e6"  // 定义标题背景色属性  private titleBackground: string = "#f8f8f8"  // 定义文本颜色属性  private textColor: string = "#333333"  // 定义基础填充大小  private basePadding: number = 4  // 定义线条宽度  private lineWidth: number = 2  // 定义单元格高度  private cellHeight: number = 50  // 定义列权重比例  private weightRatio: number[] = [1, 1, 5, 4]  // 定义基础字体大小  private baseFontSize: number = 14   // 定义一个方法 splitAndHighlight 用于分割并高亮表情符号含义中的关键词  private splitAndHighlight(item: EmoticonBean, keyword: string): string[] {    let text = item.meaning // 获取表情符号的含义文本    if (!keyword) { // 如果没有关键词，则直接返回整个文本，并显示该表情符号      item.isShown = true      return [text]    }    let segments: string[] = []; // 用于存储分割后的文本片段    let lastMatchEnd: number = 0; // 记录上一次匹配结束的位置    while (true) { // 循环查找关键词在文本中的位置      const matchIndex = text.indexOf(keyword, lastMatchEnd); // 查找关键词出现的位置      if (matchIndex === -1) { // 如果找不到关键词，将剩余文本加入到segments中并退出循环        segments.push(text.slice(lastMatchEnd));        break;      } else { // 如果找到关键词，将非关键词部分和关键词部分分别加入到segments中        segments.push(text.slice(lastMatchEnd, matchIndex)); // 非关键词部分        segments.push(text.slice(matchIndex, matchIndex + keyword.length)); // 关键词部分        lastMatchEnd = matchIndex + keyword.length;      }    }    // 如果有关键词出现，则设置表情符号为显示状态    item.isShown = (segments.indexOf(keyword) != -1)    return segments;  }   // 当组件即将出现在屏幕上时调用此方法，用于加载表情符号数据  aboutToAppear() {    // 从资源管理器中读取本地文件 emoticons.json 的内容    getContext().resourceManager.getRawFileContent("emoticons.json", (err: BusinessError, data) => {      if (err) { // 如果读取失败，打印错误信息        console.error('getRawFileContent error: ' + JSON.stringify(err))        return      }      // 创建一个文本解码器来将二进制数据转换为字符串      let textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM: true })      let jsonString = textDecoder.decodeToString(data, { stream: false })      let jsonObjectArray: object[] = JSON.parse(jsonString) // 将 JSON 字符串解析为对象数组      for (let i = 0; i < jsonObjectArray.length; i++) { // 遍历对象数组，填充 emoticonList        let item = jsonObjectArray[i]        this.emoticonList.push(new EmoticonBean(item['s'], item['t'], item['e'], item['m']))      }      try {        // 打印 emoticonList 到控制台以供调试        console.info(`this.emoticonList:${JSON.stringify(this.emoticonList, null, '\u00a0\u00a0')}`)      } catch (err) {        console.error('parse error: ' + JSON.stringify(err))      }    })  }   // 定义 build 方法构建组件的UI结构  build() {    Column({ space: 0 }) { // 创建一个列容器，内部元素之间没有间距      // 搜索框组件，绑定到 textInput 状态变量      Search({ value: $$this.textInput })        .margin(this.basePadding) // 设置外边距        .fontFeature("\"ss01\" on") // 设置字体特征      // 创建一个列容器用于表头      Column() {        Row() { // 创建一行用于放置表头          // 表头文字：风格          Text('风格')            .height('100%') // 设置高度为父容器的100%            .layoutWeight(this.weightRatio[0]) // 根据权重分配宽度            .textAlign(TextAlign.Center) // 文本居中对齐            .fontSize(this.baseFontSize) // 设置字体大小            .fontWeight(600) // 设置字体粗细            .fontColor(this.textColor) // 设置文本颜色          // 分割线          Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)          // 表头文字：类型          Text('类型')            .height('100%')            .layoutWeight(this.weightRatio[1])            .textAlign(TextAlign.Center)            .fontSize(this.baseFontSize)            .fontWeight(600)            .fontColor(this.textColor)          // 分割线          Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)          // 表头文字：表情          Text('表情')            .height('100%')            .layoutWeight(this.weightRatio[2])            .textAlign(TextAlign.Center)            .fontSize(this.baseFontSize)            .fontWeight(600)            .fontColor(this.textColor)          // 分割线          Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)          // 表头文字：含义          Text('含义')            .height('100%')            .layoutWeight(this.weightRatio[3])            .textAlign(TextAlign.Center)            .fontSize(this.baseFontSize)            .fontWeight(600)            .fontColor(this.textColor)        }.height(this.cellHeight).borderWidth(this.lineWidth).borderColor(this.lineColor)        .backgroundColor(this.titleBackground) // 设置背景颜色      }.width(`100%`).padding({ left: this.basePadding, right: this.basePadding })       // 创建一个滚动容器 Scroll 包含表情符号列表      Scroll() {        Column() {          // ForEach 循环遍历 emoticonList 数组，创建每一行代表一个表情符号条目          ForEach(this.emoticonList, (item: EmoticonBean) => {            Row() {              // 显示表情符号的风格              Text(item.style)                .height('100%')                .layoutWeight(this.weightRatio[0])                .textAlign(TextAlign.Center)                .fontSize(this.baseFontSize)                .fontColor(this.textColor)              // 分割线              Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)              // 显示表情符号的类型              Text(item.type)                .height('100%')                .layoutWeight(this.weightRatio[1])                .textAlign(TextAlign.Center)                .fontSize(this.baseFontSize)                .fontColor(this.textColor)              // 分割线              Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)              // 显示表情符号              Text(item.emoticon)                .height('100%')                .layoutWeight(this.weightRatio[2])                .textAlign(TextAlign.Center)                .fontSize(this.baseFontSize)                .fontColor(this.textColor)                .copyOption(CopyOptions.LocalDevice) // 允许复制到剪贴板              // 分割线              Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)              // 显示表情符号的含义，支持关键字高亮              Text() {                ForEach(this.splitAndHighlight(item, this.textInput), (segment: string, index: number) => {                  ContainerSpan() {                    Span(segment)                      .fontColor(segment === this.textInput ? Color.White : Color.Black) // 根据是否是关键词设置字体颜色                      .onClick(() => { // 设置点击事件监听器                        console.info(`Highlighted text clicked: ${segment}`); // 打印点击的文本信息                        console.info(`Click index: ${index}`); // 打印点击的索引信息                      });                  }.textBackgroundStyle({                    color: segment === this.textInput ? Color.Red : Color.Transparent // 根据是否是关键词设置背景颜色                  });                });              }              .height('100%')              .layoutWeight(this.weightRatio[3])              .textAlign(TextAlign.Center)              .fontSize(this.baseFontSize)              .fontColor(this.textColor)              .padding({ left: this.basePadding, right: this.basePadding })            }            .height(this.cellHeight)            .borderWidth({ left: this.lineWidth, right: this.lineWidth, bottom: this.lineWidth })            .borderColor(this.lineColor)            // 根据表情符号的状态（是否显示）来决定其可见性            .visibility(item.isShown ? Visibility.Visible : Visibility.None)          })        }.width(`100%`).padding({ left: this.basePadding, right: this.basePadding })      }.width('100%').layoutWeight(1).align(Alignment.Top)      // 触摸事件处理，当用户点击空白区域时，关闭键盘输入      .onTouch((event) => {        if (event.type == TouchType.Down) { // 如果是按下事件          inputMethod.getController().stopInputSession() // 停止当前的输入会话        }      })    }.width('100%').height('100%').backgroundColor(Color.White); // 设置容器的宽高和背景颜色  }}