HarmonyOS鸿蒙Next中TextArea组件是否支持自定义emoji

HarmonyOS鸿蒙Next中TextArea组件是否支持自定义emoji 目前需求为将 [emoji01] 这类型的字符串映射为自定义的表情包图片,以ImageSpan或其他方式显示在TextArea的文本框中,并且不影响其他字符的输入,类似微信的输入框和doge表情。有办法实现吗?

3 回复

TextArea不支持图文混排的能力,要想使用图文混排可以通过RichEdictor去实现。具体参考文档:RichEditor-文本与输入-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者,示例如下:

@Entry
@Component
struct RichEditorExample {
  controller: RichEditorController = new RichEditorController();
  private imgs: (string | number | Resource)[] = [$r('app.media.image1'), $r('app.media.image2'), $r('app.media.image3'), 1, 2, 3, 4, 5, 6, String.fromCodePoint(0x1F600)];
  // 自定义键盘组件
  @Builder
  CustomKeyboardBuilder() {
    Column() {
      Grid() {
        ForEach(this.imgs, (item: string | number | Resource) => {
          GridItem() {
            if (typeof item === 'number' || typeof item === 'string') {
              Button(item + '')
                .width(110).onClick(() => {
                  this.controller.addTextSpan(item + '', {
                    offset: this.controller.getCaretOffset(),
                    style:
                    {
                      fontColor: Color.Orange,
                      fontSize: 30
                    }
                  })
                  this.controller.setCaretOffset(this.controller.getCaretOffset() + item.toString().length)
                })
            } else {
              Image(item)
                .width(110).onClick(() => {
                  this.controller.addImageSpan(item, {
                    imageStyle:
                    {
                      size: ['110px', '110px']
                    }
                  })
                })
            }
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }
  build() {
    Column() {
      RichEditor({ controller: this.controller })// 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder())
        .margin(10)
        .border({ width: 1 })
        .height(200)
        .borderWidth(1)
        .borderColor(Color.Red)
        .width('100%')
    }
  }
}

更多关于HarmonyOS鸿蒙Next中TextArea组件是否支持自定义emoji的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,TextArea组件支持自定义emoji。开发者可以通过使用Unicode字符或自定义字体来实现emoji的显示。Unicode字符可以直接嵌入到文本中,而自定义字体则需要通过字体文件来定义特定的emoji符号。TextArea组件能够正常渲染这些自定义的emoji,确保在用户界面中正确显示。

HarmonyOS鸿蒙Next中的TextArea组件目前不支持直接自定义emoji。TextArea主要用于多行文本输入,其默认支持系统提供的emoji键盘输入。若需实现自定义emoji功能,可以通过在应用层添加emoji选择器,并将选中的emoji插入到TextArea中。这种方式需要开发者自行实现emoji的识别和插入逻辑。

回到顶部