一个例子说明鸿蒙应用的MVVM架构

// 定义 PersonInfo 接口
export interface PersonInfo {
id: number;
name: string;
gender: string;
age: number;
}
// 提供一些示例数据
export const samplePersons: PersonInfo[] = [
{ id: 1, name: '张三', gender: '男', age: 10 },
{ id: 2, name: '李四', gender: '女', age: 15 },
{ id: 3, name: '王五', gender: '男', age: 8 },
{ id: 4, name: '赵六', gender: '女', age: 20 },
{ id: 5, name: '赵六', gender: '女', age: 10 }
];

import { PersonInfo } from '../model/PersonModel';
export class PersonUtils {
// 判断是否为未成年人（年龄 < 14）
static isChildren(age: number): boolean {
return age < 14;
}
// 判断某条记录中的 ID 是否需要红色显示
// 当年龄小于14岁时，返回 true 表示需要红色显示 ID
static shouldHighlightId(person: PersonInfo): boolean {
return PersonUtils.isChildren(person.age) && person.name ==='赵六';
}
}

import { PersonInfo, samplePersons } from '../model/PersonModel';
import { PersonUtils } from '../utils/PersonUtils';
@ObservedV2
export class PersonViewModel {
@Trace persons: PersonInfo[] = [];  //引用model
@Trace title: string = '人员信息列表';
constructor() {
this.loadPersons();
}
// 加载人员数据
loadPersons(): void {
this.persons = [...samplePersons];
}
// 获取人员总数
getTotalCount(): number {
return this.persons.length;
}
// 获取成年人数量
getAdultCount(): number {
return this.persons.filter(person => !PersonUtils.isChildren(person.age)).length;
}
// 获取未成年人数量
getChildrenCount(): number {
return this.persons.filter(person => PersonUtils.isChildren(person.age)).length;
}
// 判断是否需要高亮显示 ID
shouldHighlightId(person: PersonInfo): boolean {
return PersonUtils.shouldHighlightId(person);
}
// 获取年龄显示颜色（未成年人显示蓝色）
getAgeColor(person: PersonInfo): string {
return PersonUtils.isChildren(person.age) ? '#0066CC' : '#333333';
}
}

import { PersonInfo } from '../model/PersonModel';
import { PersonViewModel } from '../viewmodel/PersonViewModel';
import { PersonUtils } from '../utils/PersonUtils';
@Entry
@ComponentV2
struct Index {
@Local viewModel: PersonViewModel = new PersonViewModel();    //引用ViewModel
build() {
Column() {
// 标题
Text(this.viewModel.title)
.fontSize(24)
.fontWeight(FontWeight.Bold)
.margin({ top: 20, bottom: 10 })
// 人员列表标题
Text('人员列表')
.fontSize(18)
.fontWeight(FontWeight.Medium)
.alignSelf(ItemAlign.Start)
.margin({ left: 10, bottom: 10 })
// 人员列表
List() {
ForEach(this.viewModel.persons, (person: PersonInfo, //引用model

index: number) => {
ListItem() {
this.PersonListItem(person)
}
                }, (person: PersonInfo) => person.id.toString())
}
.width('100%')
.layoutWeight(1)
.scrollBar(BarState.Auto)
}
.width('100%')
.height('100%')
.padding(16)
.backgroundColor('#FFFFFF')
}
// 人员列表项组件
@Builder
PersonListItem(person: PersonInfo) {
Row() {
// ID 显示 - 未成年人用红色
Text(`#${person.id}`)
.fontSize(16)
.fontColor(this.viewModel.shouldHighlightId(person) ? '#FF0000' : '#333333')
.fontWeight(this.viewModel.shouldHighlightId(person) ? FontWeight.Bold : FontWeight.Normal)
.width(60)
// 姓名
Text(person.name)
.fontSize(16)
.fontColor('#333333')
.width(80)
// 性别
Text(person.gender)
.fontSize(14)
.fontColor('#666666')
.width(50)
// 年龄
Text(`${person.age}岁`)
.fontSize(14)
.fontColor(this.viewModel.getAgeColor(person))
.width(60)
// 未成年人标签
if (PersonUtils.isChildren(person.age)) {
Text('未成年')
.fontSize(11)
.fontColor('#FFFFFF')
.backgroundColor('#FF6600')
.borderRadius(12)
.padding({ left: 8, right: 8, top: 2, bottom: 2 })
.margin({ left: 10 })
}
        }
.width('100%')
.height(56)
.padding({ left: 12, right: 12 })
.borderRadius(8)
// .backgroundColor(index % 2 === 0 ? '#FFFFFF' : '#F9F9F9')
.margin({ bottom: 4 })
}
}