一、案例介绍

本案例将展示如何使用ImageSpan组件实现一个支持表情符号的聊天消息显示功能。通过这个案例，我们将学习如何在文本中自然地嵌入表情图片，并保持良好的排版效果。

二、实现效果

• 文本中自然嵌入表情符号
• 表情符号大小与文字协调
• 多个表情符号混排显示
• 基线对齐保持一致

三、代码实现

1. 基础结构

@Entry
@Component
struct MessageDisplay {
  build() {
    Column() {
      this.MessageItem('你好啊')
      this.MessageItem('今天天气真不错')
      this.MessageItem('我们去野餐吧')
    }
    .width('100%')
    .padding(16)
  }

  @Builder
  MessageItem(text: string) {
    Row() {
      Text() {
        this.TextWithEmoji(text)
      }
      .backgroundColor('#E8F5E9')
      .padding(12)
      .borderRadius(8)
    }
    .width('100%')
    .margin({ top: 8, bottom: 8 })
  }
}

2. 表情符号实现

@Builder
TextWithEmoji(text: string) {
  // 解析文本中的表情标记
  ForEach(this.parseText(text), (item) => {
    if (item.type === 'text') {
      Span(item.content)
    } else {
      ImageSpan(this.getEmojiResource(item.content))
        .width(24)
        .height(24)
        .verticalAlign(VerticalAlign.Middle)
    }
  })
}

3. 辅助方法

private parseText(text: string): Array<{
  type: 'text' | 'emoji',
  content: string
}> {
  // 实现文本解析逻辑
  const result = [];
  const regex = /\[emoji:\w+\]/g;
  let lastIndex = 0;
  let match;

  while ((match = regex.exec(text)) !== null) {
    if (match.index > lastIndex) {
      result.push({
        type: 'text',
        content: text.slice(lastIndex, match.index)
      });
    }
    result.push({
      type: 'emoji',
      content: match[0].slice(7, -1)
    });
    lastIndex = regex.lastIndex;
  }

  if (lastIndex < text.length) {
    result.push({
      type: 'text',
      content: text.slice(lastIndex)
    });
  }

  return result;
}

private getEmojiResource(name: string): Resource {
  // 获取表情资源
  const emojiMap = {
    'smile': $r('app.media.emoji_smile'),
    'heart': $r('app.media.emoji_heart'),
    'sun': $r('app.media.emoji_sun')
  };
  return emojiMap[name];
}

四、关键点解析

1. 文本解析

• 使用正则表达式识别表情标记
• 将文本分割为普通文本和表情标记
• 保持文本的完整性和顺序

2. 表情显示

• 统一表情图片尺寸
• 使用verticalAlign保持对齐
• 控制表情间距和位置

3. 布局处理

• 使用Row和Column组织消息结构
• 添加适当的内外边距
• 设置合适的背景和圆角

五、使用说明

1. 消息格式

   • 使用[emoji:name]格式插入表情
   • 支持文本和表情混排
   • 可以连续使用多个表情

2. 样式调整

   • 可以修改表情尺寸
   • 可以调整消息气泡样式
   • 可以更改对齐方式

3. 扩展建议

   • 添加更多表情资源
   • 实现表情选择面板
   • 支持自定义表情