HarmonyOS Next 办公应用：消息气泡组件的开发实现（二）

3. 消息内容显示

@Builder
MessageContent() {
  if (this.isAppletMsg) {
    Column() {
      Row() {
        Image($r('app.media.ic_tea'))
          .height('16vp')
          .width('16vp')
          .margin({ right: '10vp' })
        Text('奶茶')
          .fontSize('12fp')
          .fontColor('#182431')
          .textAlign(TextAlign.Start)
          .fontWeight(400)
      }
      .margin({ bottom: '7vp' })

      Text(this.content)
        .fontSize('12fp')
        .fontColor('#182431')
        .textAlign(TextAlign.Start)
        .fontWeight(400)
        .margin({ bottom: '8vp' })
        .copyOption(CopyOptions.LocalDevice)
      Flex() {
      }
      .height('138vp')
      .width('186vp')
      .backgroundImage($r('app.media.picture_applet_link'))
      .backgroundImageSize({ width: '186vp', height: '138vp' })
      .constraintSize({ maxWidth: '100%' })
      .margin({ bottom: '6vp' })

      Text('应用')
        .fontSize('10fp')
        .fontColor('#8A9097')
        .textAlign(TextAlign.Start)
        .fontWeight(400)
    }
    .alignItems(HorizontalAlign.Start)
  } else if (this.isDocumentMsg) {
    Column() {
      Row() {
        NormalText({ data: this.content })
          .margin({ right: '10vp' })
          .width('132vp')
        Image($r('app.media.ic_PDF'))
          .height('36vp')
          .width('36vp')
          .margin({ right: '11vp' })
      }
      .margin({ bottom: '4vp' })

      IntroduceText({ data: '24KB' })
        .margin({ bottom: '10vp' })
      Divider()
        .color('#E6E6E6')
        .strokeWidth(1).margin({ bottom: '1vp' })
      Row() {
        Image($r('app.media.ic_file'))
          .width('12vp')
          .height('12vp')
          .margin({ right: '6vp' })
        IntroduceText({
          data: '文档'
        })
          .margin({ top: '-2vp' })
      }
    }
    .alignItems(HorizontalAlign.Start)
    .width('180vp')
    .margin({ bottom: '-7vp' })
  } else {
    Text(this.content)
      .fontSize(12)
      .fontWeight(400)
      .lineHeight('21vp')
      .fontColor('#182431')
      .copyOption(CopyOptions.LocalDevice)
  }
}

MessageContent 方法根据 isAppletMsg 和 isDocumentMsg 的值，分别构建小程序消息、文档消息和普通文本消息的布局。对于小程序消息，显示图标、标题和链接图片；对于文档消息，显示文档名称、大小和类型；对于普通文本消息，直接显示消息内容。

总结

通过上述核心代码，我们在 HarmonyOS Next 中成功构建了一个功能丰富的消息气泡组件。该组件能够根据消息的发送方向和类型，展示不同的布局和内容，增强了办公应用中消息交互的直观性和用户体验。开发者可以根据实际需求，进一步扩展该组件，如添加更多的消息类型、优化布局样式等。