目录

案例介绍

本篇文章将详细介绍如何在HarmonyOS NEXT中实现即时通讯应用的聊天记录区域。通过合理的消息数据结构和灵活的布局设计，我们将实现一个支持双向对话展示的专业聊天界面。

代码实现

@Entry
@Component
struct ChatApp {
  // 聊天记录数据结构
  @State messages: Array<{
    id: number,
    senderId: number,
    content: string,
    time: string,
    type: 'text' | 'image'
  }> = [
    {
      id: 1,
      senderId: 1,
      content: '你好，在吗？',
      time: '14:28',
      type: 'text'
    },
    {
      id: 2,
      senderId: 0,
      content: '在的，什么事？',
      time: '14:29',
      type: 'text'
    },
    {
      id: 3,
      senderId: 1,
      content: '晚上一起吃饭吗？',
      time: '14:30',
      type: 'text'
    }
  ]

  // 当前选中的联系人ID
  @State currentContact: number = 1

  build() {
    Column() {
      // 聊天标题栏
      Row() {
        Text(this.contacts.find(c => c.id === this.currentContact)?.name || '')
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
      }
      .width('100%')
      .height(60)
      .padding({ left: 20, right: 20 })
      .backgroundColor(Color.White)

      // 聊天记录列表
      List() {
        ForEach(this.messages, (message) => {
          ListItem() {
            Row() {
              if (message.senderId === this.currentContact) {
                // 对方消息样式
                Image(this.contacts.find(c => c.id === message.senderId)?.avatar)
                  .width(36)
                  .height(36)
                  .borderRadius(18)
                Column() {
                  Text(message.content)
                    .fontSize(14)
                    .backgroundColor('#F0F0F0')
                    .padding(10)
                    .borderRadius(8)
                  Text(message.time)
                    .fontSize(12)
                    .fontColor('#999')
                    .margin({ top: 4 })
                }
                .alignItems(HorizontalAlign.Start)
                .margin({ left: 10 })
              } else {
                // 自己的消息样式
                Blank()
                Column() {
                  Text(message.content)
                    .fontSize(14)
                    .backgroundColor('#339AF0')
                    .fontColor(Color.White)
                    .padding(10)
                    .borderRadius(8)
                  Text(message.time)
                    .fontSize(12)
                    .fontColor('#999')
                    .margin({ top: 4 })
                }
                .alignItems(HorizontalAlign.End)
              }
            }
            .width('100%')
            .padding(10)
          }
        })
      }
      .width('100%')
      .layoutWeight(1)
      .backgroundColor('#F8F9FA')
    }
    .layoutWeight(1)
    .height('100%')
  }
}

代码详解

数据结构设计

1. 消息数据模型
   • 使用@State装饰器定义响应式数据
   • 包含id、senderId标识消息来源
   • content存储消息内容
   • time记录发送时间
   • type区分消息类型

界面布局实现

1. 标题栏设计

   • Row组件实现水平布局
   • 动态显示当前联系人名称
   • 设置合适的高度和内边距

2. 消息列表布局

   • List组件实现消息列表
   • 根据senderId区分消息样式
   • 使用Row和Column组合布局
   • 合理使用Blank组件调整位置

消息样式实现

1. 对方消息样式

   • 左侧显示头像
   • 浅灰色背景的消息气泡
   • 左对齐布局

2. 自己的消息样式

   • 右侧显示消息
   • 蓝色背景的消息气泡
   • 白色文字
   • 右对齐布局

总结

本篇文章详细介绍了如何实现一个专业的聊天记录展示界面：

1. 设计了完整的消息数据结构
2. 实现了清晰的消息列表布局
3. 区分了不同发送者的消息样式
4. 优化了消息气泡的视觉效果