arkTs：鸿蒙开发中使用模型（Model）类封装数据与方法

1.鸿蒙开发中为什么要使用模型（Model）类封装数据与方法

在鸿蒙 ArkTS 开发中，我们常常需要在 UI 中展示结构化数据，比如“图标 + 文本 + 数量”等组合。
许多初学者直接使用普通对象 {} 来表示这些数据，但在项目复杂后，这种方式会带来维护困难。

本文将介绍一种更规范的做法：使用接口（interface）+ 类（class）搭建模型（Model）结构，并在类中封装方法，使数据更清晰、更可复用。

• 为什么推荐使用模型类
  在鸿蒙开发中，使用 Model 类 来封装数据与逻辑是一种非常推荐的做法

优势点	说明
✅ 类型安全	interface + class 提供静态类型检查
✅ 默认值	防止 undefined 报错
✅ 逻辑封装	数据操作集中在类中
✅ 易维护	后期修改字段或逻辑只需改模型
✅ 可扩展	模型可继续继承或增加方法
✅ 结构清晰	UI 层仅关心显示，逻辑层由 Model 管理

2.定义接口：明确数据结构

2.1 接口的作用

• 明确数据有哪些字段；

• 定义字段的类型；

• 让 编辑开发工具（如：DevEco Studio、IDE等） 自动提示与类型检查；

• 避免拼写错误、类型不符等问题。

2.2 接口的作用-----代码A

• 首先我们定义一个接口 iconStr，用于描述数据的结构：

/*** 图标 + 说明 的自定义组件模型接口* -----------------------------------------------------* 这里定义了一个基础数据结构，用于描述一个图标组件* 包含图标的说明文字、emoji 图标、图片资源以及数量等。*/
export interface iconStr {name: string // 图标文字说明，例如 "点赞"iconStr?: string // 可选的 emoji 图标，例如 "💡"、"👍"imageStr?: ResourceStr // 可选的图片资源（可以放项目资源ID）nameNum?: number // 可选数量属性，例如点赞数、收藏数等
}

3.使用 class 构建模型类

3.1 封装方法

封装方法的意义：

• 逻辑内聚：与数据相关的操作写在类中；

• 统一管理：不同组件复用相同逻辑；

• 安全性高：防止外部乱改数据；

• 可扩展：后期新增行为时，不影响外部使用。

3.2 使用 class 构建模型类-----代码B

文本路径：entry/src/main/ets/model/iconStrModel.ets

② 补充说明：文件index.ets内容如下

/*** 模型导航页*/export * from "./iconStrModel"

在接口基础上，我们创建一个类 iconStrModel 来实现接口，并封装逻辑。

运行效果（方法及逻辑）：

• 初始显示：👍 点赞 (12)

• “点赞 +1”：数量自动加 1；

• “重置数量”：恢复为 0。

/*** 图标 + 说明 的自定义组件模型接口* -----------------------------------------------------* 这里定义了一个基础数据结构，用于描述一个图标组件* 包含图标的说明文字、emoji 图标、图片资源以及数量等。*/
export interface iconStr {name: string // 图标文字说明，例如 "点赞"iconStr?: string // 可选的 emoji 图标，例如 "💡"、"👍"imageStr?: ResourceStr // 可选的图片资源（可以放项目资源ID）nameNum?: number // 可选数量属性，例如点赞数、收藏数等
}/*** 图标 + 说明 的模型类* -----------------------------------------------------* class 实现 interface，可以扩展逻辑。* 通过类封装数据和方法，既能约束结构，又能拥有功能行为。*/
export class iconStrModel implements iconStr {// ✅ 字段初始化，确保默认值存在（避免 undefined 报错）name: string = "" // 默认空字符串iconStr?: string = undefinedimageStr?: ResourceStr = undefinednameNum?: number = 0/*** 构造函数* -----------------------------------------------------* 通过传入一个符合 iconStr 接口的数据对象来实例化模型。* 使用 ?? 运算符给 nameNum 设置默认值 0（防止 undefined）。*/constructor(model: iconStr) {this.name = model.namethis.iconStr = model.iconStrthis.imageStr = model.imageStrthis.nameNum = model.nameNum ?? 0// 👆 "??" 是空值合并运算符：// 如果 model.nameNum 为 null 或 undefined，就用默认值 0；// 如果 model.nameNum 是 0，则保持 0 不变。}/*** 方法一：数量增加* -----------------------------------------------------* 逻辑：每次调用让数量递增（默认 +1，可自定义步长）*/increaseCount(num: number = 1) {this.nameNum! += num// "!" 是非空断言，告诉编译器这里一定有值。}/*** 方法二：返回显示格式* -----------------------------------------------------* 通过 getter 计算属性拼接展示文字，例如：* "👍 点赞 (12)"* 如果没有 iconStr，则自动忽略 emoji。*/get displayName(): string {return `${this.iconStr ?? ""} ${this.name} (${this.nameNum})`// 👆 "??" 用于避免 iconStr 为 undefined 时拼出 "undefined 点赞"}/*** 方法三：重置数量* -----------------------------------------------------* 让数量归零，常用于“清空”或“重置”操作。*/resetCount() {this.nameNum = 0}
}

4.在鸿蒙 ArkUI 中使用模型类

根据自己需要设置展示页的布局，然后调用模型方法

文件路径：entry/src/main/ets/pages/Index.ets

4.1 展示UI效果-----代码C

运行效果（方法及逻辑）：

• 初始显示：👍 点赞 (12)

• 点击 “点赞 +1”：数量自动加 1；

• 点击 “重置数量”：恢复为 0。

/*** 图标 + 数量 显示组件示例页* -----------------------------------------------------* 这里演示了如何在 ArkUI 页面中使用 iconStrModel。* 通过绑定 @State 修饰的模型实例，* UI 可以自动响应数据变化，实现“响应式更新”。*/
import { iconStr, iconStrModel } from '../model'@Entry
@Component
struct Index {/*** @State 修饰符* -----------------------------------------------------* 用于声明可响应式的状态变量。* 当 iconItem 的属性变化时（例如点赞数改变），* 页面上的 Text 会自动刷新显示。*/@State iconItem: iconStrModel = new iconStrModel({name: "点赞", // 图标说明文字iconStr: "👍", // emoji 图标nameNum: 12, // 初始数量} as iconStr)/*** 页面布局* -----------------------------------------------------* 由 Column、Row、Button、Text 组成的简单交互界面。*/build() {Column({ space: 10 }) {// 显示名称与数量Text(this.iconItem.displayName).fontSize(22).fontWeight(FontWeight.Bold)// 三个按钮操作逻辑Row({ space: 10 }) {// 按钮1：点赞 +1Button("点赞 +1").onClick(() => {this.iconItem.increaseCount()})// 按钮2：点赞 +2Button("点赞 +2").onClick(() => {this.iconItem.increaseCount(2)})// 按钮3：重置数量Button("重置数量").onClick(() => {this.iconItem.resetCount()})}}.padding(20)}
}

5.运行效果截图

6.结语

由于每个人的记忆力有限，为方便知识点的重启拾起而作此文。本文内容也比较简单，可当作记忆的锚点，一看就捡回来。

由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

7.定位日期

2025.10.16；
15:35