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

Amazing_Ruby2025-03-31 15:49

3. 消息内容显示

MessageContent 方法根据消息类型（小程序消息、文档消息或普通文本消息）显示不同的内容。

typescript 复制代码

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

根据 isAppletMsg 和 isDocumentMsg 的值，分别构建小程序消息、文档消息和普通文本消息的布局。

总结

通过上述核心代码，我们在 HarmonyOS Next 中成功构建了一个支持多种消息类型的消息气泡组件。该组件通过状态和属性控制消息气泡的显示样式和内容，根据消息方向和类型展示不同的布局。开发者可以根据实际需求进一步扩展该组件，如添加更多的消息类型、优化布局样式等，以满足更多办公场景的消息展示需求。