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

【引言】
本文将先容一个名为“颜文字搜索器”的开发案例，该应用是基于鸿蒙NEXT平台构建的，旨在帮助用户快速查找和使用各种风格的心情符号。通过本案例的学习，读者可以相识如安在鸿蒙平台上举行数据处理、UI设计以及交互逻辑的实现。
【环境预备】
• 操纵系统：Windows 10
• 开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
• 目标设备：华为Mate60 Pro
• 开发语言：ArkTS
• 框架：ArkUI
• API版本：API 12
【开发思绪】
1. 数据模子设计
为了表示单个心情符号的信息，我们定义了一个 EmoticonBean 类，它包含了心情符号的风格（style）、类型（type）、心情符号本身（emoticon）及其寄义（meaning）。此外，还添加了一个布尔属性 isShown 来追踪心情符号是否应该显示给用户，这有助于在搜索时动态更新列表。
2. UI 组件与结构
应用的主界面由一个 Index 组件构成，它负责整体结构的设计。界面上部是一个搜索框，允许用户输入关键词来过滤心情符号列表。下方则以表格情势展示了所有符合条件的心情符号，每一行包罗四个部分：风格、类型、心情符号和寄义。为了提升用户体验，当用户点击某个心情符号或其寄义中的高亮文本时，会触发相应的点击变乱，并输出日记信息。
3. 数据加载与处理
心情符号的数据来源于一个本地 JSON 文件 (emoticons.json)，该文件在组件初次渲染之前被读取并解析为 EmoticonBean 对象数组。每次用户修改搜索框中的内容时，都会调用 splitAndHighlight 方法对每个心情符号的寄义举行分割，并检查是否存在匹配的关键字。假如存在，则设置 isShown 属性为 true，否则为 false，以此控制心情符号是否在界面上显示。
4. 搜索与高亮
splitAndHighlight 函数用于将心情符号的寄义按关键字分割成多个片断，并返回这些片断组成的数组。对于包含关键字的片断，会在界面上以不同的颜色高亮显示，从而直观地指出匹配的部分。此外，此函数还会根据是否有匹配项来决定心情符号是否可见，确保只有相关的心情符号才会展示给用户。
5. 用户交互
为了让用户有更好的操纵体验，我们在界面上实现了触摸变乱监听，当用户点击非输入地区时，自动关闭键盘。如许既保证了界面整洁，又简化了用户的操纵流程。
【完整代码】
数据源：src/main/resources/rawfile/emoticons.json
https://download.csdn.net/download/zhongcongxu01/90126325
代码

1. // 引入必要的工具库 util 用于文本解码等操作
2. import { util } from '@kit.ArkTS'
3. // 引入 BusinessError 类用于处理业务逻辑错误
4. import { BusinessError } from '@kit.BasicServicesKit'
5. // 引入 inputMethod 模块用于管理输入法行为
6. import { inputMethod } from '@kit.IMEKit'
8. // 定义一个可以被观察的数据模型 EmoticonBean 表示单个表情符号的信息
9. @ObservedV2
10. class EmoticonBean {
11.   // 定义风格属性，并初始化为空字符串
12.   style: string = ""
13.   // 定义类型属性，并初始化为空字符串
14.   type: string = ""
15.   // 定义表情符号本身，并初始化为空字符串
16.   emoticon: string = ""
17.   // 定义含义属性，并初始化为空字符串
18.   meaning: string = ""
20.   // 构造函数，允许在创建对象时设置上述属性
21.   constructor(style: string, type: string, emoticon: string, meaning: string) {
22.     this.style = style
23.     this.type = type
24.     this.emoticon = emoticon
25.     this.meaning = meaning
26.   }
28.   // 定义是否显示的表情符号状态标记，默认为 true，使用 @Trace 装饰器使其可追踪变化
29.   @Trace isShown: boolean = true
30. }
32. // 使用 @Entry 和 @Component 装饰器定义 Index 组件作为应用入口
33. @Entry
34. @Component
35. struct Index {
36.   // 定义一个状态变量 textInput 用于存储搜索框中的文本内容，默认为空字符串
37.   @State private textInput: string = ''
38.   // 定义一个状态变量 emoticonList 用于存储表情符号列表，默认为空数组
39.   @State private emoticonList: EmoticonBean[] = []
41.   // 定义线条颜色属性
42.   private lineColor: string = "#e6e6e6"
43.   // 定义标题背景色属性
44.   private titleBackground: string = "#f8f8f8"
45.   // 定义文本颜色属性
46.   private textColor: string = "#333333"
47.   // 定义基础填充大小
48.   private basePadding: number = 4
49.   // 定义线条宽度
50.   private lineWidth: number = 2
51.   // 定义单元格高度
52.   private cellHeight: number = 50
53.   // 定义列权重比例
54.   private weightRatio: number[] = [1, 1, 5, 4]
55.   // 定义基础字体大小
56.   private baseFontSize: number = 14
58.   // 定义一个方法 splitAndHighlight 用于分割并高亮表情符号含义中的关键词
59.   private splitAndHighlight(item: EmoticonBean, keyword: string): string[] {
60.     let text = item.meaning // 获取表情符号的含义文本
61.     if (!keyword) { // 如果没有关键词，则直接返回整个文本，并显示该表情符号
62.       item.isShown = true
63.       return [text]
64.     }
65.     let segments: string[] = []; // 用于存储分割后的文本片段
66.     let lastMatchEnd: number = 0; // 记录上一次匹配结束的位置
67.     while (true) { // 循环查找关键词在文本中的位置
68.       const matchIndex = text.indexOf(keyword, lastMatchEnd); // 查找关键词出现的位置
69.       if (matchIndex === -1) { // 如果找不到关键词，将剩余文本加入到segments中并退出循环
70.         segments.push(text.slice(lastMatchEnd));
71.         break;
72.       } else { // 如果找到关键词，将非关键词部分和关键词部分分别加入到segments中
73.         segments.push(text.slice(lastMatchEnd, matchIndex)); // 非关键词部分
74.         segments.push(text.slice(matchIndex, matchIndex + keyword.length)); // 关键词部分
75.         lastMatchEnd = matchIndex + keyword.length;
76.       }
77.     }
78.     // 如果有关键词出现，则设置表情符号为显示状态
79.     item.isShown = (segments.indexOf(keyword) != -1)
80.     return segments;
81.   }
83.   // 当组件即将出现在屏幕上时调用此方法，用于加载表情符号数据
84.   aboutToAppear() {
85.     // 从资源管理器中读取本地文件 emoticons.json 的内容
86.     getContext().resourceManager.getRawFileContent("emoticons.json", (err: BusinessError, data) => {
87.       if (err) { // 如果读取失败，打印错误信息
88.         console.error('getRawFileContent error: ' + JSON.stringify(err))
89.         return
90.       }
91.       // 创建一个文本解码器来将二进制数据转换为字符串
92.       let textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM: true })
93.       let jsonString = textDecoder.decodeToString(data, { stream: false })
94.       let jsonObjectArray: object[] = JSON.parse(jsonString) // 将 JSON 字符串解析为对象数组
95.       for (let i = 0; i < jsonObjectArray.length; i++) { // 遍历对象数组，填充 emoticonList
96.         let item = jsonObjectArray[i]
97.         this.emoticonList.push(new EmoticonBean(item['s'], item['t'], item['e'], item['m']))
98.       }
99.       try {
100.         // 打印 emoticonList 到控制台以供调试
101.         console.info(`this.emoticonList:${JSON.stringify(this.emoticonList, null, '\u00a0\u00a0')}`)
102.       } catch (err) {
103.         console.error('parse error: ' + JSON.stringify(err))
104.       }
105.     })
106.   }
108.   // 定义 build 方法构建组件的UI结构
109.   build() {
110.     Column({ space: 0 }) { // 创建一个列容器，内部元素之间没有间距
111.       // 搜索框组件，绑定到 textInput 状态变量
112.       Search({ value: $$this.textInput })
113.         .margin(this.basePadding) // 设置外边距
114.         .fontFeature(""ss01" on") // 设置字体特征
115.       // 创建一个列容器用于表头
116.       Column() {
117.         Row() { // 创建一行用于放置表头
118.           // 表头文字：风格
119.           Text('风格')
120.             .height('100%') // 设置高度为父容器的100%
121.             .layoutWeight(this.weightRatio[0]) // 根据权重分配宽度
122.             .textAlign(TextAlign.Center) // 文本居中对齐
123.             .fontSize(this.baseFontSize) // 设置字体大小
124.             .fontWeight(600) // 设置字体粗细
125.             .fontColor(this.textColor) // 设置文本颜色
126.           // 分割线
127.           Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
128.           // 表头文字：类型
129.           Text('类型')
130.             .height('100%')
131.             .layoutWeight(this.weightRatio[1])
132.             .textAlign(TextAlign.Center)
133.             .fontSize(this.baseFontSize)
134.             .fontWeight(600)
135.             .fontColor(this.textColor)
136.           // 分割线
137.           Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
138.           // 表头文字：表情
139.           Text('表情')
140.             .height('100%')
141.             .layoutWeight(this.weightRatio[2])
142.             .textAlign(TextAlign.Center)
143.             .fontSize(this.baseFontSize)
144.             .fontWeight(600)
145.             .fontColor(this.textColor)
146.           // 分割线
147.           Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
148.           // 表头文字：含义
149.           Text('含义')
150.             .height('100%')
151.             .layoutWeight(this.weightRatio[3])
152.             .textAlign(TextAlign.Center)
153.             .fontSize(this.baseFontSize)
154.             .fontWeight(600)
155.             .fontColor(this.textColor)
156.         }.height(this.cellHeight).borderWidth(this.lineWidth).borderColor(this.lineColor)
157.         .backgroundColor(this.titleBackground) // 设置背景颜色
158.       }.width(`100%`).padding({ left: this.basePadding, right: this.basePadding })
160.       // 创建一个滚动容器 Scroll 包含表情符号列表
161.       Scroll() {
162.         Column() {
163.           // ForEach 循环遍历 emoticonList 数组，创建每一行代表一个表情符号条目
164.           ForEach(this.emoticonList, (item: EmoticonBean) => {
165.             Row() {
166.               // 显示表情符号的风格
167.               Text(item.style)
168.                 .height('100%')
169.                 .layoutWeight(this.weightRatio[0])
170.                 .textAlign(TextAlign.Center)
171.                 .fontSize(this.baseFontSize)
172.                 .fontColor(this.textColor)
173.               // 分割线
174.               Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
175.               // 显示表情符号的类型
176.               Text(item.type)
177.                 .height('100%')
178.                 .layoutWeight(this.weightRatio[1])
179.                 .textAlign(TextAlign.Center)
180.                 .fontSize(this.baseFontSize)
181.                 .fontColor(this.textColor)
182.               // 分割线
183.               Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
184.               // 显示表情符号
185.               Text(item.emoticon)
186.                 .height('100%')
187.                 .layoutWeight(this.weightRatio[2])
188.                 .textAlign(TextAlign.Center)
189.                 .fontSize(this.baseFontSize)
190.                 .fontColor(this.textColor)
191.                 .copyOption(CopyOptions.LocalDevice) // 允许复制到剪贴板
192.               // 分割线
193.               Line().height('100%').width(this.lineWidth).backgroundColor(this.lineColor)
194.               // 显示表情符号的含义，支持关键字高亮
195.               Text() {
196.                 ForEach(this.splitAndHighlight(item, this.textInput), (segment: string, index: number) => {
197.                   ContainerSpan() {
198.                     Span(segment)
199.                       .fontColor(segment === this.textInput ? Color.White : Color.Black) // 根据是否是关键词设置字体颜色
200.                       .onClick(() => { // 设置点击事件监听器
201.                         console.info(`Highlighted text clicked: ${segment}`); // 打印点击的文本信息
202.                         console.info(`Click index: ${index}`); // 打印点击的索引信息
203.                       });
204.                   }.textBackgroundStyle({
205.                     color: segment === this.textInput ? Color.Red : Color.Transparent // 根据是否是关键词设置背景颜色
206.                   });
207.                 });
208.               }
209.               .height('100%')
210.               .layoutWeight(this.weightRatio[3])
211.               .textAlign(TextAlign.Center)
212.               .fontSize(this.baseFontSize)
213.               .fontColor(this.textColor)
214.               .padding({ left: this.basePadding, right: this.basePadding })
215.             }
216.             .height(this.cellHeight)
217.             .borderWidth({ left: this.lineWidth, right: this.lineWidth, bottom: this.lineWidth })
218.             .borderColor(this.lineColor)
219.             // 根据表情符号的状态（是否显示）来决定其可见性
220.             .visibility(item.isShown ? Visibility.Visible : Visibility.None)
221.           })
222.         }.width(`100%`).padding({ left: this.basePadding, right: this.basePadding })
223.       }.width('100%').layoutWeight(1).align(Alignment.Top)
224.       // 触摸事件处理，当用户点击空白区域时，关闭键盘输入
225.       .onTouch((event) => {
226.         if (event.type == TouchType.Down) { // 如果是按下事件
227.           inputMethod.getController().stopInputSession() // 停止当前的输入会话
228.         }
229.       })
230.     }.width('100%').height('100%').backgroundColor(Color.White); // 设置容器的宽高和背景颜色
231.   }
232. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。