案例介绍

本教程将介绍如何设计一个社交应用的数据模型。我们将实现一个包含消息、联系人、发现和个人中心等功能的社交应用，通过合理的数据结构设计，支持未读消息提醒和新功能提示等特性。

代码实现

@Entry
@Component
struct BadgeTabContentExample {
  @State currentIndex: number = 0;
  private tabsController: TabsController = new TabsController();
  
  // 标签页数据
  @State tabItems: Array<{
    title: string,
    icon: Resource,
    selectedIcon: Resource,
    badge: number | string | null
  }> = [
    { 
      title: '消息', 
      icon: $r('app.media.icon_message_normal'), 
      selectedIcon: $r('app.media.icon_message_selected'),
      badge: 12
    },
    { 
      title: '联系人', 
      icon: $r('app.media.icon_contacts_normal'), 
      selectedIcon: $r('app.media.icon_contacts_selected'),
      badge: null
    },
    { 
      title: '发现', 
      icon: $r('app.media.icon_discover_normal'), 
      selectedIcon: $r('app.media.icon_discover_selected'),
      badge: 'NEW'
    },
    { 
      title: '我的', 
      icon: $r('app.media.icon_profile_normal'), 
      selectedIcon: $r('app.media.icon_profile_selected'),
      badge: null
    }
  ];
  
  // 模拟消息数据
  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 },
    { name: '系统通知', content: '您的账号已完成实名认证', time: '星期一', 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' },
    { name: '钱七', initial: 'Q' },
    { name: '孙八', initial: 'S' },
    { name: '周九', initial: 'Z' },
    { name: '吴十', initial: 'W' },
    { name: '郑十一', initial: 'Z' },
    { name: '王十二', initial: 'W' }
  ];
  
  // 模拟发现数据
  private discoveries: Array<{
    title: string,
    isNew: boolean
  }> = [
    { title: '朋友圈', isNew: false },
    { title: '扫一扫', isNew: false },
    { title: '游戏', isNew: true },
    { title: '小程序', isNew: false },
    { title: '直播', isNew: true }
  ];
}

代码详解

1. 标签页数据结构

@State tabItems: Array<{
  title: string,
  icon: Resource,
  selectedIcon: Resource,
  badge: number | string | null
}>

标签页数据字段说明：

• title: 标签页标题
• icon: 未选中状态图标
• selectedIcon: 选中状态图标
• badge: 徽标内容，支持数字、文本或无徽标

2. 消息数据结构

private messages: Array<{
  name: string,
  content: string,
  time: string,
  unread: boolean
}>

消息数据字段说明：

• name: 发送者名称
• content: 消息内容
• time: 发送时间
• unread: 是否未读

3. 联系人数据结构

private contacts: Array<{
  name: string,
  initial: string
}>

联系人数据字段说明：

• name: 联系人姓名
• initial: 姓名首字母，用于排序和分组

4. 发现功能数据结构

private discoveries: Array<{
  title: string,
  isNew: boolean
}>

发现功能字段说明：

• title: 功能名称
• isNew: 是否为新功能

5. 状态管理

@State currentIndex: number = 0;
private tabsController: TabsController = new TabsController();

状态管理说明：

• currentIndex: 当前选中的标签页索引
• tabsController: 标签页控制器

总结

通过合理的数据结构设计，我们为社交应用提供了完整的数据支持。使用@State装饰器管理标签页数据，支持徽标显示功能，并为消息、联系人和发现功能提供了相应的数据模型。这种模块化的数据设计方式，使得应用的数据管理更加清晰和高效。