HarmonyOS Next聊天输入框如何实现输入和表情切换？

Question

点击编辑区域表情按钮，软键盘切换为表情面板，表情按钮图标变成键盘图标。再次点击，表情面板切换回软键盘，按钮图标由键盘变回表情。
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

本文选择自定义键盘来控制软键盘和表情面板的切换。通过设置RichEditor.customKeyboard为表情面板组件的构建函数EmojiKeyboard，来展示表情面板，设置该属性为undefined，则展示默认软键盘。通过这种方式在软键盘与表情面板切换时也无需手动进行richEditor焦点的处理。

// features/home/src/main/ets/view/CommentKeyboard.ets
RichEditor({ controller: this.richEditorController })
  .customKeyboard(this.isEmojiKeyboardVisible ? this.EmojiKeyboard() : undefined)
  // ...

为保证切换软键盘和表情面板时，评论模块整体高度不发生改变，则需要获取软键盘高度对表情面板高度进行计算和手动设置。有可能软键盘高度被手动更改，所以需要通过keyboardHeightChange事件对软键盘高度进行监听，当高度大于0时，更新记录软键盘高度的状态变量。注意在组件销毁前取消对应的监听事件。

// features/home/src/main/ets/view/CommentKeyboard.ets
aboutToAppear() {
  window.getLastWindow(getContext(this)).then(win => {
    this.addKeyboardHeightListener(win);
  });
}

aboutToDisappear() {
  window.getLastWindow(getContext(this)).then(win => {
    this.removeKeyboardHeightListener(win);
  });
}

addKeyboardHeightListener(win: window.Window) {
  win.on('keyboardHeightChange', (height) => {
    if (height !== 0) {
      this.keyboardHeight = px2vp(height);
      return;
    }
    // ...
  });
}

removeKeyboardHeightListener(win: window.Window) {
  win.off('keyboardHeightChange');
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。