HarmonyOS实战：自定义表情键盘

前言

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

实现效果

需求分析

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

技术实现

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

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

1. 对数据源进行处理，这里键盘每页设置 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)
        }
      }
    }

1. 当数据源与表情位置确定好后，需要实现页面布局，这里使用 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")

1. 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)

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

 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)
        })
    }

总结

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