HarmonyOS 自定义表情键盘弹出时，布局不会自动重新渲染到软键盘上面，而系统的键盘弹出则正常

自定义表情键盘弹出时，布局不会自动重新渲染到软键盘上面，而系统的键盘弹出则正常，如图显示，请问该怎么处理，我的代码如下：

RichEditor({ controller: this.controller })// 绑定自定义键盘  
    .customKeyboard(this.isUseEmoji ? this.CustomKeyboardBuilder2() : null)  
    .backgroundColor("#F5F6F8")  
    .width("100%")  
    .height(50)1.
2.
3.
4.
5.

HarmonyOS

superinsect

2024-10-28 09:13:19

浏览

回答 1

按赞同

按时间

put_get

自定义键盘采用覆盖原始界面的方式呈现，不会对应用原始界面产生压缩或者上提。

参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-richeditor-V5#属性

解决方案：可以使用KeyboardAvoidMode，OFFSET：上抬模式。RESIZE：压缩模式。

可以使用。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#keyboardavoidmode11

customKeyboard会覆盖原始界面，不支持对界面产生上提的功能。

需要在自定义键盘弹出时手动对富文本上提，使用margin属性。

以下是示意demo。

build() {  
  Column() {  
    Row() {  
    }.layoutWeight(1.0)  
    RichEditor({ controller: this.controller })// 绑定自定义键盘  
      .customKeyboard(this.isUseEmoji ? this.CustomKeyboardBuilder() : null)  
      .margin(10)  
      .border({ width: 1 })  
      .height(200)  
      .borderWidth(1)  
      .borderColor(Color.Red)  
      .width('100%')  
      .margin({bottom:this.isClick?300:0})  
      .onClick(() => {  
        this.isClick =!this.isClick  
      })  
    Text("switch emoji").onClick(() => {  
      this.isUseEmoji = !this.isUseEmoji  
      this.controller.getSpans().forEach(  
        (value) => {  
          hilog.error(0x0001, "xxxxx", "" + value)  
        }  
      )  
    })  
  }  
}  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.