案例介绍

本教程将介绍如何实现社交应用的消息列表界面。我们将实现一个包含搜索栏和消息列表的界面，支持未读消息提示和消息已读状态更新功能。

代码实现

// 消息标签页
TabContent() {
  Column({ space: 8 }) {
    // 搜索栏
    Row() {
      Image($r('app.media.icon_search'))
        .width(24)
        .height(24)
        .margin({ right: 8 })
      
      Text('搜索')
        .fontSize(14)
        .fontColor('#999999')
    }
    .width('90%')
    .height(40)
    .backgroundColor('#F5F5F5')
    .borderRadius(20)
    .padding({ left: 12, right: 12 })
    .margin({ top: 8, bottom: 8 })
    
    // 消息列表
    List() {
      ForEach(this.messages, (message, index) => {
        ListItem() {
          Row({ space: 12 }) {
            // 头像
            Stack() {
              Text(message.name.substring(0, 1))
                .fontSize(20)
                .fontColor('#FFFFFF')
            }
            .width(48)
            .height(48)
            .backgroundColor('#0A59F7')
            .borderRadius(24)
            .justifyContent(FlexAlign.Center)
            
            // 消息内容
            Column({ space: 4 }) {
              Row() {
                Text(message.name)
                  .fontSize(16)
                  .fontWeight(FontWeight.Medium)
                
                Blank()
                
                Text(message.time)
                  .fontSize(12)
                  .fontColor('#999999')
              }
              .width('100%')
              
              Row() {
                Text(message.content)
                  .fontSize(14)
                  .fontColor('#666666')
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
                
                if (message.unread) {
                  Blank()
                  
                  Circle({ width: 8, height: 8 })
                    .fill('#FF0000')
                }
              }
              .width('100%')
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')
          .padding({ left: 16, right: 16 })
          .onClick(() => {
            // 点击消息时，将其标记为已读
            this.messages[index].unread = false;
            
            // 更新徽标数
            this.updateMessageBadge();
          })
        }
        .height(72)
      })
    }
    .width('100%')
    .layoutWeight(1)
    .divider({ strokeWidth: 1, color: '#F1F3F5' })
  }
}

代码详解

1. 搜索栏实现

Row() {
  Image($r('app.media.icon_search'))
    .width(24)
    .height(24)
  
  Text('搜索')
    .fontSize(14)
    .fontColor('#999999')
}
.width('90%')
.height(40)
.backgroundColor('#F5F5F5')

搜索栏的设计特点：

• 使用Row组件横向布局
• 搜索图标和提示文本的组合
• 灰色背景和圆角边框
• 合适的内外边距

2. 消息列表项布局

Row({ space: 12 }) {
  // 头像
  Stack() {
    Text(message.name.substring(0, 1))
      .fontSize(20)
  }
  .width(48)
  .height(48)
  
  // 消息内容
  Column({ space: 4 }) {
    // 名称和时间
    Row() { ... }
    // 消息内容和未读标记
    Row() { ... }
  }
}

列表项布局特点：

• 左侧圆形头像显示名称首字母
• 右侧垂直排列消息信息
• 固定高度72px
• 统一的内边距和间距

3. 消息内容布局

Column({ space: 4 }) {
  Row() {
    Text(message.name)
      .fontSize(16)
    Blank()
    Text(message.time)
      .fontSize(12)
  }
  
  Row() {
    Text(message.content)
      .fontSize(14)
    if (message.unread) {
      Circle({ width: 8, height: 8 })
        .fill('#FF0000')
    }
  }
}

消息内容的布局：

• 上方显示名称和时间
• 下方显示消息内容
• 未读消息显示红点标记
• 消息内容单行显示，超出部分省略

4. 交互处理

.onClick(() => {
  this.messages[index].unread = false;
  this.updateMessageBadge();
})

点击事件处理：

• 点击消息将其标记为已读
• 更新消息标签页的未读徽标
• 移除消息项的未读红点

总结

通过合理的组件布局和样式设计，我们实现了社交应用的消息列表界面。使用List组件展示消息列表，通过Row和Column组件的嵌套实现复杂的布局，并添加了未读消息提示和消息已读状态更新功能，为用户提供了清晰直观的消息管理界面。