案例介绍

本教程将介绍如何实现社交应用的发现和我的标签页内容。我们将实现发现列表和个人中心的布局和样式，为用户提供功能入口和个人信息展示。

代码实现

@Entry
@Component
struct BadgeTabContentExample {
  // 模拟发现数据
  private discoveries: Array<{
    title: string,
    isNew: boolean
  }> = [
    { title: '朋友圈', isNew: false },
    { title: '扫一扫', isNew: false },
    { title: '游戏', isNew: true },
    { title: '小程序', isNew: false },
    { title: '直播', isNew: true }
  ]

  build() {
    Column() {
      Tabs({ controller: this.tabsController, index: this.currentIndex }) {
        // 发现标签页
        TabContent() {
          List() {
            ForEach(this.discoveries, (discovery) => {
              ListItem() {
                Row() {
                  Text(discovery.title)
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                  
                  if (discovery.isNew) {
                    Text('NEW')
                      .fontSize(10)
                      .fontColor('#FFFFFF')
                      .backgroundColor('#FF0000')
                      .borderRadius(10)
                      .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                      .margin({ left: 8 })
                  }
                  
                  Blank()
                  
                  Image($r('app.media.arrow_right'))
                    .width(16)
                    .height(16)
                    .fillColor('#999999')
                }
                .width('100%')
                .padding({ left: 16, right: 16 })
                .onClick(() => {
                  // 点击发现项时，将其标记为非新内容
                  discovery.isNew = false
                  
                  // 更新徽标
                  this.updateDiscoveryBadge()
                })
              }
              .height(56)
            })
          }
          .width('100%')
          .height('100%')
          .divider({ strokeWidth: 1, color: '#F1F3F5' })
        }
        .tabBar(this.TabBarWithBadge(2))
        
        // 我的标签页
        TabContent() {
          Column({ space: 16 }) {
            // 用户信息
            Row({ space: 16 }) {
              Stack() {
                Text('我')
                  .fontSize(20)
                  .fontColor('#FFFFFF')
              }
              .width(64)
              .height(64)
              .backgroundColor('#0A59F7')
              .borderRadius(32)
              .justifyContent(FlexAlign.Center)
              
              Column({ space: 4 }) {
                Text('我的用户名')
                  .fontSize(18)
                  .fontWeight(FontWeight.Medium)
                
                Text('查看个人主页')
                  .fontSize(14)
                  .fontColor('#666666')
              }
              .alignItems(HorizontalAlign.Start)
            }
            .width('100%')
            .padding(16)
            
            // 功能列表
            List() {
              ListItem() {
                this.ProfileItem('我的收藏')
              }
              
              ListItem() {
                this.ProfileItem('我的钱包')
              }
              
              ListItem() {
                this.ProfileItem('我的相册')
              }
              
              ListItem() {
                this.ProfileItem('设置')
              }
            }
            .width('100%')
            .divider({ strokeWidth: 1, color: '#F1F3F5' })
          }
          .width('100%')
          .height('100%')
        }
        .tabBar(this.TabBarWithBadge(3))
      }
    }
  }
  
  // 个人中心功能项
  @Builder
  ProfileItem(title: string) {
    Row() {
      Text(title)
        .fontSize(16)
      
      Blank()
      
      Image($r('app.media.arrow_right'))
        .width(16)
        .height(16)
        .fillColor('#666666')
    }
    .width('100%')
    .height(48)
    .padding({ left: 16, right: 16 })
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

代码详解

1. 发现列表实现

List() {
  ForEach(this.discoveries, (discovery) => {
    ListItem() {
      Row() {
        Text(discovery.title)
        if (discovery.isNew) {
          Text('NEW')
            .backgroundColor('#FF0000')
        }
        Image($r('app.media.arrow_right'))
      }
    }
  })
}

发现列表特点：

• 简洁的列表布局
• 新内容标记显示
• 箭头指示交互
• 统一的高度设置

2. 个人信息实现

Row({ space: 16 }) {
  Stack() {
    Text('我')
      .fontSize(20)
      .fontColor('#FFFFFF')
  }
  .width(64)
  .height(64)
  
  Column({ space: 4 }) {
    Text('我的用户名')
    Text('查看个人主页')
  }
}

个人信息特点：

• 大尺寸头像
• 用户名显示
• 个人主页入口
• 合理的间距

3. 功能列表实现

@Builder
ProfileItem(title: string) {
  Row() {
    Text(title)
      .fontSize(16)
    
    Image($r('app.media.arrow_right'))
      .width(16)
      .height(16)
  }
  .height(48)
}

功能列表特点：

• 统一的列表项
• 箭头指示样式
• 固定的高度
• 居中对齐布局

4. 新内容标记

if (discovery.isNew) {
  Text('NEW')
    .fontSize(10)
    .fontColor('#FFFFFF')
    .backgroundColor('#FF0000')
    .borderRadius(10)
    .padding({ left: 6, right: 6, top: 2, bottom: 2 })
}

标记特点：

• 醒目的红色背景
• 圆角样式设计
• 合适的文字大小
• 适当的内边距

总结

本教程展示了如何实现社交应用的发现和我的标签页内容。通过合理的布局设计和统一的样式处理，我们创建了功能丰富的界面。重点关注了功能入口的展示和个人信息的布局，为用户提供了便捷的功能访问体验。