HarmonyOS 实战：自定义表情键盘

作者：IT小码哥

2025-06-29
北京
本文字数：1806 字
阅读完需：约 6 分钟

前言

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

实现效果

需求分析

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

技术实现

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


    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.length      for (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)        })    }

复制代码

总结

在实现自定义表情键盘的过程中，需要对表情键盘对数据源进行处理，以实现显示页面的整齐效果，同时通过不同的表情类型，实现删除效果和填充空格对齐，已经学会了的小伙伴，赶快动手试试吧。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/cc3cf87a1e905a252c5a865e6】。文章转载请联系作者。

IT小码哥

关注

还未添加个人签名 2021-04-29 加入

还未添加个人简介

发布

暂无评论

创作场景

HarmonyOS 实战：自定义表情键盘

前言

实现效果

需求分析

技术实现

总结

IT小码哥

评论