案例介绍

本教程将介绍如何实现社交应用的消息和联系人标签页内容。我们将实现消息列表和联系人列表的布局和样式，为用户提供清晰的信息展示。

代码实现

@Entry
@Component
struct BadgeTabContentExample {
  // 模拟消息数据
  private messages: Array<{
    name: string,
    content: string,
    time: string,
    unread: boolean
  }> = [
    { name: '张三', content: '你好，最近怎么样？', time: '10:30', unread: true },
    { name: '李四', content: '周末有空一起打球吗？', time: '昨天', unread: true },
    { name: '王五', content: '项目进展如何了？', time: '昨天', unread: true },
    { name: '赵六', content: '文档我已经发你邮箱了', time: '星期二', unread: true }
  ]
  
  // 模拟联系人数据
  private contacts: Array<{
    name: string,
    initial: string
  }> = [
    { name: '张三', initial: 'Z' },
    { name: '李四', initial: 'L' },
    { name: '王五', initial: 'W' },
    { name: '赵六', initial: 'Z' }
  ]

  build() {
    Column() {
      Tabs({ controller: this.tabsController, index: this.currentIndex }) {
        // 消息标签页
        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 })
                }
                .height(72)
              })
            }
            .width('100%')
            .layoutWeight(1)
            .divider({ strokeWidth: 1, color: '#F1F3F5' })
          }
        }
        .tabBar(this.TabBarWithBadge(0))
        
        // 联系人标签页
        TabContent() {
          List() {
            ForEach(this.contacts, (contact) => {
              ListItem() {
                Row({ space: 12 }) {
                  // 头像
                  Stack() {
                    Text(contact.initial)
                      .fontSize(20)
                      .fontColor('#FFFFFF')
                  }
                  .width(48)
                  .height(48)
                  .backgroundColor('#0A59F7')
                  .borderRadius(24)
                  .justifyContent(FlexAlign.Center)
                  
                  // 联系人名称
                  Text(contact.name)
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                }
                .width('100%')
                .padding({ left: 16, right: 16 })
              }
              .height(64)
            })
          }
          .width('100%')
          .height('100%')
          .divider({ strokeWidth: 1, color: '#F1F3F5' })
        }
        .tabBar(this.TabBarWithBadge(1))
      }
    }
  }
}

代码详解

1. 消息列表实现

List() {
  ForEach(this.messages, (message, index) => {
    ListItem() {
      Row({ space: 12 }) {
        // 头像和消息内容实现
      }
    }
    .height(72)
  })
}

消息列表特点：

• 固定高度的列表项
• 头像和内容布局
• 未读消息标记
• 时间显示位置

2. 联系人列表实现

List() {
  ForEach(this.contacts, (contact) => {
    ListItem() {
      Row({ space: 12 }) {
        Stack() {
          Text(contact.initial)
        }
        Text(contact.name)
      }
    }
    .height(64)
  })
}

联系人列表特点：

• 简洁的列表布局
• 首字母头像显示
• 统一的样式风格
• 合适的列表高度

3. 搜索栏实现

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

搜索栏特点：

• 圆角搜索框
• 图标文字组合
• 灰色背景色
• 居中对齐布局

4. 头像样式实现

Stack() {
  Text(message.name.substring(0, 1))
    .fontSize(20)
    .fontColor('#FFFFFF')
}
.width(48)
.height(48)
.backgroundColor('#0A59F7')
.borderRadius(24)

头像样式特点：

• 圆形头像设计
• 首字母显示
• 统一的主题色
• 居中对齐文字

总结

本教程展示了如何实现社交应用的消息和联系人标签页内容。通过合理的列表布局和统一的样式设计，我们创建了清晰易用的信息展示界面。重点关注了列表项的布局结构和视觉效果，为用户提供了良好的信息浏览体验。