当前位置：首页 > news >正文

HarmonyOS实战：自定义表情键盘

news 2025/6/30 9:45:25

前言

在日常开发中，不同的应用程序都有自己专属的键盘，特别是在评论和发帖中需要自定义表情键盘，鸿蒙中对自定义键盘提供了很好的支持，本篇文章将带你一步步实现一个自定义表情键盘，建议点赞收藏！

实现效果

需求分析

对数据源进行拆分组合。
处理表情之间的间隔与删除表情的位置。
实现表情键盘的布局。

技术实现

定义一个数组用来临时存放表情字符

let array: string[] = ["😁", "😂", "😃", "😄", "😅", "😆", "😉", "😊","😋", "😌", "😍", "😏", "😒", "😓", "😔", "😖","😘", "😚", "😜", "😝", "😞", "😠", "😡", "😢","😣", "😤", "😥", "😨", "😭", "😰", "😩","😪", "😫", "😱", "😲", "😳", "😵", "😷", "😀","😇", "😎", "😐", "😑", "😕", "😗", "😙", "😛","😟", "😦", "😧", "😬", "😮", "😯", "😴", "😶","😸", "😹", "😺", "😻", "😼", "😽", "😾","😿", "🙀"]

对数据源进行处理，这里键盘每页设置 31 个表情和一个删除表情。其中对 31 取整用来实现表情分页，最后当前页面表情等于 31 时，添加一个删除类型的表情。

 array.forEach((item, index) => {if (index % 31 == 0) {emojiPackages.push(new SCEmojiPackageBean())}let laseSectionBean = emojiPackages[emojiPackages.length-1]laseSectionBean.emojis.push(item)if (laseSectionBean.emojis.length == 31) {laseSectionBean.emojis.push(SCEmojiModelType.delete)}})

3.当表情分页后，最后一页的表情不足 31 个时，填充空格以保证删除表情显示在键盘的右下角，SCEmojiModelType 是个枚举类型，定义了表情，删除，空格三个类型。

if (emojiPackages.length > 0) {let laseSectionBean = emojiPackages[emojiPackages.length-1]let appentCount = 32 - laseSectionBean.emojis.lengthfor (let index = 0; index < appentCount; index++) {if (index == appentCount - 1) {laseSectionBean.emojis.push(SCEmojiModelType.delete)} else {laseSectionBean.emojis.push(SCEmojiModelType.space)}}}

当数据源与表情位置确定好后，需要实现页面布局，这里使用 Swiper 实现页面分页效果。

Swiper(this.swiperController) {ForEach(this.emojiPackages, (model: SCEmojiPackageBean, index) => {this.itemSectionView(model)}, (model: SCEmojiPackageBean, index) => {return "" + index})}.width(FULL_WIDTH).height(FULL_HEIGHT).backgroundColor("#f8f8f8")

Swiper 的每个子页面需要使用 Grid 给表情布局，实现四行八列。

 Grid() {ForEach(sectionModel.emojis, (item: SCEmojiModelType | string, index) => {GridItem() {Column() {this.itemView(item)}.width(FULL_WIDTH).height(FULL_HEIGHT)}}, (item: SCEmojiModelType | string, index) => {return "" + index})}.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr 1fr').width(FULL_WIDTH).height(FULL_HEIGHT)

根据不同的数据类型显示不同的表情或填充空格。

 if (text == SCEmojiModelType.space) {Text("").fontSize($r("app.float.vp_20")).textAlign(TextAlign.Center)} else if (text == SCEmojiModelType.delete) {Text("🔙").fontSize($r("app.float.vp_20")).textAlign(TextAlign.Center).onClick(()=>{this.inputEvent("")})} else if (text as string) {Text(text as string).fontSize($r("app.float.vp_20")).textAlign(TextAlign.Center).onClick(()=>{this.inputEvent(text as string)})}