HarmonyOS鸿蒙Next中emoji表情图怎么做可以显示在输入框中？

【背景知识】

• TextInput：单行文本输入框组件。
• TextArea：多行文本输入的文本框。
• RichEditor：支持图文混排和文本交互式编辑的组件。

【解决方案】

如果输入框的点击事件被TextArea或TextInput组件消费，判断应用使用TextArea或TextInput，TextArea和TextInput不支持自定义富文本输入，无法显示表情包。

参考以下代码，使用RichEditor组件实现显示表情包图片的功能：

@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%')
    }
  }
}

要在输入框中显示emoji表情图片，不能使用标准的 TextInput 或 TextArea 组件，因为它们仅用于处理纯文本。您需要使用支持图文混排的组件。

核心解决方案：使用 RichEditor 组件

RichEditor 是鸿蒙系统提供的富文本编辑器组件，它允许在编辑内容中插入图片、设置样式等，完美支持图文混排，下面是实现步骤：

1. 在布局中创建 RichEditor 组件： 将您原本的 TextInput 或 TextArea 替换为 RichEditor。

   // 示例代码
   import { richEditor } from '@kit.ArkUI';
   
   @Entry
   @Component
   struct MyComponent {
     build() {
       Column() {
         // 使用 RichEditor 替代 TextInput/TextArea
         RichEditor()
           .height(200)
           .width('100%')
           .onReady(() => {
             // 编辑器准备就绪后的回调
           })
       }
     }
   }
   

2. 获取 RichEditor 的控制器： 为了调用插入图片的接口，您需要获取其控制器。

   import { richEditor } from '@kit.ArkUI';
   
   @Entry
   @Component
   struct MyComponent {
     // 1. 创建控制器
     controller: richEditor.RichEditorController = new richEditor.RichEditorController();
   
     build() {
       Column() {
         // 2. 将控制器绑定到组件
         RichEditor({ controller: this.controller })
           .height(200)
           .width('100%')
       }
     }
   }
   

3. 插入 Emoji 表情图片： 使用控制器的 addImageSpan 方法在光标位置插入图片。您的 emoji 表情是 PNG 格式，可以作为 ResourceStr（资源路径）传入。

   // 假设这是您点击某个表情按钮后触发的方法
   insertEmoji(emojiRes: string) {
     try {
       // 调用 addImageSpan 接口插入图片
       // 第一个参数是图片资源路径，例如 $r('app.media.emoji_smile')
       // 第二个参数是可选配置（如宽高等）
       let index = this.controller.addImageSpan(emojiRes, {
         size: { width: 24, height: 24 } // 设置表情图片的显示大小
       });
       console.info(`Succeeded in inserting emoji at index: ${index}`);
     } catch (err) {
       console.error(`Failed to insert emoji. Code: ${err.code}, message: ${err.message}`);
     }
   }
   

总结与关键点

因此，您的正确做法是：

1. 将 UI 布局中的输入组件替换为 RichEditor。
2. 获取 RichEditorController。
3. 在需要插入表情的事件（如按钮点击）中，调用 controller.addImageSpan(emojiResource) 方法。

这样，emoji 表情图片就能正确地显示在您的“输入框”（即富文本编辑器）中了。