目录

案例介绍

本篇文章将介绍如何设计个人资料卡片的数据模型。通过合理的数据结构设计，我们可以更好地管理用户的个人信息，并为UI展示提供数据支持。

代码实现

@Entry
@Component
struct ProfileCardExample {
  // 用户数据
  private userData = {
    avatar: $r('app.media.avatar'),
    name: '张小明',
    title: '高级开发工程师',
    company: 'HarmonyOS开发部',
    followers: 1286,
    following: 342,
    posts: 57,
    bio: 'HarmonyOS开发爱好者，专注于ArkTS和HarmonyOS NEXT应用开发，热爱分享技术经验。',
    isFollowed: false
  }
  
  // 关注状态
  @State isFollowed: boolean = this.userData.isFollowed
}

代码详解

1. 数据结构设计

在ProfileCardExample组件中，我们定义了一个userData对象来存储用户的个人资料信息：

• avatar: 用户头像资源引用
• name: 用户名称
• title: 用户职位
• company: 所属公司
• followers: 粉丝数量
• following: 关注数量
• posts: 文章数量
• bio: 个人简介
• isFollowed: 关注状态

2. 状态管理

使用@State装饰器定义了关注状态变量：

@State isFollowed: boolean = this.userData.isFollowed

这样设计的好处是：

• 将关注状态提升为组件状态，可以响应式更新UI
• 初始值从userData中获取，保持数据一致性
• 方便后续实现关注/取消关注功能

3. 资源引用

头像使用$r()语法引用应用资源：

avatar: $r('app.media.avatar')

这种方式的优点：

• 统一管理应用资源
• 支持资源的动态替换
• 便于后续的资源优化

总结

本文通过设计个人资料卡片的数据模型，展示了如何高效地组织和管理用户个人信息。通过使用对象形式存储用户数据，包括头像、姓名、职位、公司、粉丝数量、关注数量、文章数量、个人简介和关注状态，结构清晰且易于维护。同时，利用@State装饰器管理关注状态，实现了响应式更新，确保UI能够实时反映用户操作。此外，合理使用$r()语法进行资源引用，提高了代码的复用性和可维护性。整体设计为后续的UI实现和交互功能开发提供了坚实的基础。