HarmonyOS 鸿蒙Next 系统键盘和自定义键盘

可以参考这个demo

@Entry
@Component
struct CustomKeyBoardDemo {
  richEditorController: RichEditorController = new RichEditorController()
  @State customKeyboardShow: boolean = false
  @State systemKeyboardShow: boolean = true

  // 自定义键盘组件
  @Builder
  CustomKeyboardBuilder() {
    Column() {
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110)
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      Row().height("10%")
      List() {
        ListItem() {
          Text('1')
        }

        ListItem() {
          Text('1')
        }

        ListItem() {
          Text('1')
        }

        ListItem() {
          Text('1')
        }

        ListItem() {
          Text('1')
        }

        ListItem() {
          Text('1')
        }
      }.height("80%").backgroundColor("#0afede")

      Row() {
        RichEditor({ controller: this.richEditorController })
          .customKeyboard(this.systemKeyboardShow ? undefined : this.CustomKeyboardBuilder(),
            { supportAvoidance: true })
          .backgroundColor('#F4F4F4')
          .margin(10)
          .id('chatContentFocus')
          .width("60%")
          .borderRadius(15)
        Text('change')
          .onClick(async () => {
            if (this.systemKeyboardShow) {
              // 停止编辑，关闭系统键盘
              this.richEditorController.stopEditing()
              //做延迟
              setTimeout(() => {
                focusControl.requestFocus('chatContentFocus')
              }, 50)
              this.systemKeyboardShow = false
              this.customKeyboardShow = true
            } else {
              // 关闭自定义键盘 切换成系统键盘
              this.richEditorController.stopEditing()

              this.systemKeyboardShow = true
              this.customKeyboardShow = false
              //input重新获取焦点
              focusControl.requestFocus('chatContentFocus')
            }
          }).width(80).height(30)
      }.height("10%")
    }
  }
}