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

// 引入必要的工具库 util 用于文本解码等操作
import { util } from '@kit.ArkTS'
// 引入 BusinessError 类用于处理业务逻辑错误
import { BusinessError } from '@kit.BasicServicesKit'
// 引入 inputMethod 模块用于管理输入法行为
import { inputMethod } from '@kit.IMEKit'
 
// 定义一个可以被观察的数据模型 EmoticonBean 表示单个表情符号的信息
@ObservedV2
class 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
@Component
struct 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); // 设置容器的宽高和背景颜色
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.