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

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

概述

在 HarmonyOS Next 办公类应用开发中，实现消息气泡组件是常见的交互需求。消息气泡可用于展示聊天消息、通知等内容，并且根据消息类型和发送方向有不同的显示样式。下面将介绍如何构建一个支持多种消息类型的消息气泡组件。

核心代码功能及对应代码段

1. 组件状态与属性定义

MessageBubble 组件定义了多个状态和属性，用于控制消息气泡的显示样式和内容。

typescript 复制代码

@Component
export struct MessageBubble {
  receivedName: string ='';
  @Link currentFeatureIndex: number;
  private isReceived: boolean = false;
  private content: string = '';
  private isAppletMsg?: boolean;
  private isDocumentMsg?: boolean;
  avatar1: Resource = $r('app.media.avatar1');
  avatar2: Resource = $r('app.media.avatar7');
  // ...
}

receivedName：接收方的名称。
isReceived：标记消息是否为接收的消息。
content：消息的具体内容。
isAppletMsg 和 isDocumentMsg：标记消息是否为小程序消息或文档消息。
avatar1 和 avatar2：分别表示接收方和发送方的头像资源。

2. 消息气泡布局构建

build 方法构建了消息气泡的整体布局，根据 isReceived 的值决定消息气泡的对齐方式和头像显示位置。

typescript 复制代码

build() {
  Column() {
    Flex({ justifyContent: this.isReceived ? FlexAlign.Start : FlexAlign.End, direction: FlexDirection.Row }) {
      if (this.isReceived) {
        Image(conversationListData.find((item) => item.name === this.receivedName)?.icon || this.avatar1)
          .width('40vp')
          .height('40vp')
          .flexShrink(0)
      }
      Column() {
        Stack({ alignContent: this.isReceived ? Alignment.TopStart : Alignment.TopEnd }) {
          // 路径绘制，用于消息气泡的三角箭头
          Path()
            .commands('M-10 1 L0 18 L32 1 Z')
            .fillOpacity(1)
            .stroke(Color.White)
            .strokeWidth(1)
            .fill(Color.White)
            .visibility(this.isReceived ? Visibility.Visible : Visibility.None)
          Path()
            .commands('M23 1 L0 28 L-10 1 Z')
            .fillOpacity(1)
            .stroke(Color.White)
            .strokeWidth(1)
            .fill(Color.White)
            .visibility(this.isReceived ? Visibility.None : Visibility.Visible)
            .zIndex(2)
            .margin({ right: '-10vp' })
          Column() {
            this.MessageContent()
          }
          .padding({
            left: '12vp',
            right: '12vp',
            top: '10vp',
            bottom: '10vp'
          })
          .backgroundColor(Color.White)
          .borderRadius(8)
        }
        .padding({
          top: '1vp',
          left: '20vp',
          right: '20vp',
          bottom: '22vp'
        })
        .width('100%')
      }
      .width('100%')

      if (!this.isReceived) {
        Image(this.avatar2)
          .width('40vp')
          .height('40vp')
          .flexShrink(0)
      }
    }
  }
  .margin({ left: '15vp', right: '16vp' })
}

通过 Flex 组件根据 isReceived 控制消息气泡的对齐方式。
使用 Path 组件绘制消息气泡的三角箭头，根据消息方向显示不同的箭头。
调用 MessageContent 方法显示消息内容。