一、先统一概念（极简版）

• Class：数据模板（有属性、有方法）
• Interface：约束结构（只规定长啥样，不实现方法）
• @State：让数据变 “响应式”，一改 UI 自动刷新
• 鸿蒙里最标准用法：interface 定义结构 → class 实现结构 → @State 托管对象 → UI 渲染

二、完整实战案例（可直接跑）

1）先定义接口（interface）约束数据结构

model/UserInfo.ets

// 接口：只规定结构，不实现逻辑
export interface IUser {
  id: number;
  name: string;
  age: number;
  getInfo(): string;
}

2）用 Class 实现这个接口

model/User.ets

import { IUser } from './UserInfo';

// 类实现接口，必须拥有接口所有属性和方法
export class User implements IUser {
  id: number;
  name: string;
  age: number;

  constructor(id: number, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age;
  }

  // 实现接口方法
  getInfo(): string {
    return `ID: ${this.id}，姓名：${this.name}，年龄：${this.age}`;
  }

  // 自己额外加的方法（类的优势）
  isAdult(): boolean {
    return this.age >= 18;
  }
}

3）页面中用 @State 托管 Class 对象

pages/Index.ets

import { User } from '../model/User';

@Entry
@Component
struct Index {
  // ✅ @State 托管 class 实例（响应式）
  @State currentUser: User = new User(1, "张三", 20);

  // ✅ 数组也可以放 Class 实例
  @State userList: User[] = [
    new User(1, "张三", 20),
    new User(2, "李四", 16),
    new User(3, "王五", 25)
  ];

  build() {
    Column({ space: 12 }) {
      Text("Class + @State 演示")
        .fontSize(24)
        .fontWeight(FontWeight.Bold);

      // 单个对象展示
      Text(this.currentUser.getInfo())
        .fontSize(18);
      Text(`是否成年：${this.currentUser.isAdult()}`)
        .fontColor(this.currentUser.isAdult() ? Color.Green : Color.Red);

      // 按钮修改 Class 数据 → UI 自动刷新
      Button("修改年龄 +1")
        .onClick(() => {
          this.currentUser.age += 1;
        })

      Divider().margin(10);

      // 列表渲染 Class 数组
      List({ space: 8 }) {
        ForEach(this.userList, (user: User) => {
          ListItem() {
            Column() {
              Text(user.getInfo()).fontSize(16);
              Text(`成年：${user.isAdult()}`)
                .fontColor(user.isAdult() ? Color.Green : Color.Red);
            }
            .width('100%')
            .backgroundColor(0xf5f5f5)
            .padding(10)
            .borderRadius(8);
          }
        })
      }
      .width('100%')
      .padding(10)
    }
    .padding(20)
    .width('100%')
  }
}

三、关键点解释（鸿蒙开发必懂）

1. Class 和 Interface 怎么选？

• Interface：只约束结构，适合网络返回数据、协议定义
• Class：能写方法、构造函数、继承，适合业务模型
• 鸿蒙规范：
  • 数据模型优先用 Class
  • 协议 / 参数约束用 Interface

2. 为什么要用 @State 包裹 Class？

• 普通变量改了 UI 不刷新
• @State 修饰后：修改 this.currentUser.name → 页面自动更新这是鸿蒙数据驱动 UI 的核心

3. Class 数组 + ForEach 是鸿蒙列表标配

几乎所有列表页面都是：

Class 模型 → @State 数组 → ForEach 渲染

4. Class 支持继承（extends）

class VipUser extends User {
  vipLevel: number;

  constructor(id: number, name: string, age: number, vipLevel: number) {
    super(id, name, age);
    this.vipLevel = vipLevel;
  }

  override getInfo(): string {
    return super.getInfo() + `，VIP等级：${this.vipLevel}`;
  }
}