ArkUI 与 MVVM 模式的诗和远方

2024-12-04
北京
本文字数：2843 字
阅读完需：约 9 分钟

大家好，我是 V 哥。今天的内容我们来聊一聊 MVVM 模式在鸿蒙原生应用开发中的使用，比如做过 Android 开发的兄弟应该清楚，MVVM（Model + View + ViewModel）模式是一种设计模式，用于分离应用程序的业务逻辑、用户界面和数据模型。这种模式特别适用于构建富客户端应用程序，如桌面或移动应用。在 MVVM 模式中，每个部分都有其特定的职责。

ArkUI 的 MVVM 工作流程

先来看一下 MVVM 的基本概念

Model（模型）：代表应用程序的数据结构和业务逻辑。它负责存储数据以及可能的数据验证、数据转换等。
View（视图）：用户界面，负责显示数据（Model）和接收用户交互。
ViewModel（视图模型）：作为 Model 和 View 之间的中介，包含从 Model 中检索数据的逻辑，并提供数据给 View 显示。它还处理 View 发起的命令，如用户输入，然后更新 Model。

在 ArkUI 中，MVVM 模式的工作流程如下：

（1）自定义组件通过执行其 build()方法或者 @Builder 装饰的方法来渲染 UI，即 ViewModel 可以渲染 View。
（2）View 可以通过相应的 event handler 来改变 ViewModel，即事件驱动 ViewModel 的改变。另外，ViewModel 提供了 @Watch 回调方法来监听状态数据的改变。
（3）在 ViewModel 被改变时，需要同步回 Model 层，这样才能保证 ViewModel 和 Model 的一致性，即应用自身数据的一致性。
（4）ViewModel 结构设计应始终适配自定义组件的构建和更新，这也是将 Model 和 ViewModel 分开的原因。

目前之所以有很多关于 UI 构造和更新的问题，都是因为 ViewModel 的设计没有很好地支持自定义组件的渲染，或者试图去让自定义组件强行适配 Model 层，而中间没有用 ViewModel 来进行分离。例如，一个应用程序直接将 SQL 数据库中的数据读入内存，而这种数据模型不能很好地直接适配自定义组件的渲染。因此，在应用程序开发中需要适配 ViewModel 层。

了解了基本概念后，V 哥通过一个业务场景案例来介绍具体的应用。

业务场景案例：电话簿应用

假设我们要开发一个简单的电话簿应用，该应用允许用户查看联系人列表、编辑和删除联系人信息。

先来看 Model 层的实现：

1. Model 层

首先，我们定义 Model 层，包括Person类和AddressBook类。

// Person.tsexport class Person {  id: number;  name: string;  phone: string;
  constructor(id: number, name: string, phone: string) {    this.id = id;    this.name = name;    this.phone = phone;  }}
// AddressBook.tsimport { Person } from "./Person";
export class AddressBook {  private contacts: Person[] = [];
  addContact(person: Person) {    this.contacts.push(person);  }
  removeContact(id: number) {    this.contacts = this.contacts.filter(contact => contact.id !== id);  }
  getContacts() {    return this.contacts;  }}

复制代码

Model 层的实现比较简单，Person 是实体模型，表示用户信息实体，AddressBook是地址溥操作模型，并提供添加，删除和获取用户功能。

2. ViewModel 层

接下来，我们创建 ViewModel 层，它将处理业务逻辑并与 View 层通信。

// 假设我们已经定义了Person和AddressBook类import { AddressBook } from "./AddressBook";import { Person } from "./Person";
@ViewModelclass PhoneBookViewModel {  private addressBook: AddressBook;  private selectedContact: Person | null = null;
  constructor() {    this.addressBook = new AddressBook();    // 初始添加一些联系人    this.addressBook.addContact(new Person(1, "Weige", "1234567890"));    this.addressBook.addContact(new Person(2, "Vin", "0987654321"));  }
  getContacts() {    return this.addressBook.getContacts();  }
  selectContact(id: number) {    this.selectedContact = this.addressBook.getContacts().find(contact => contact.id === id);  }
  deleteContact(id: number) {    this.addressBook.removeContact(id);    this.selectedContact = null;  }}

复制代码

PhoneBookView 组件使用 ForEach 循环来渲染所有联系人，并为每个联系人提供一个点击事件，以便在点击时选择该联系人。如果选择了联系人，它还会显示该联系人的详细信息和一个删除按钮。

3. View 层

最后，我们创建 View 层，它将显示数据并处理用户交互。

// 导入必要的模块和装饰器import { PhoneBookViewModel } from "./PhoneBookViewModel";import { Component, Entry, State } from "@ohos.arkui";
// 使用@Component装饰器标记这个结构体为一个组件@Componentstruct PhoneBookView {  // 使用@State装饰器声明一个状态变量，用于存储选中的联系人  @State selectedContact: Person | null = null;
  // ViewModel实例  viewModel: PhoneBookViewModel = new PhoneBookViewModel();
  // build函数用于构建UI  build() {    Column() {      // 使用ForEach循环渲染所有联系人      ForEach(this.viewModel.getContacts(), (contact) => {        // 为每个联系人创建一个行容器        Row() {          // 显示联系人姓名和电话          Text(contact.name).fontSize(20);          Text(contact.phone).fontSize(20);          // 为每个联系人添加点击事件，选择联系人          this.onClick(() => {            this.selectedContact = contact;          });        }      });
      // 如果有选中的联系人，显示详细信息      if (this.selectedContact) {        Column() {          Text(`Selected Contact: ${this.selectedContact.name}`);          Text(`Phone: ${this.selectedContact.phone}`);          Button("Delete").onClick(() => {            this.viewModel.deleteContact(this.selectedContact.id);            this.selectedContact = null; // 清除选中状态          });        }      }    }  }}
// 使用@Entry装饰器标记这个组件为页面的入口组件@Entrystruct Main {  build() {    PhoneBookView();  }}

复制代码

解释一下

PhoneBookView 结构体定义了电话簿应用的 UI。
使用 ForEach 循环遍历 viewModel 中的所有联系人，并为每个联系人创建一个包含姓名和电话的 Row 容器。
为每个联系人添加点击事件，当点击时，将该联系人设置为选中状态。
如果有选中的联系人，显示其详细信息和一个删除按钮。
删除按钮的点击事件会调用 viewModel 的 deleteContact 方法来删除选中的联系人，并清除选中状态。

最后小结一下

在这个案例中，AddressBook和Person类构成了 Model 层，负责存储和处理电话簿数据。PhoneBookViewModel作为 ViewModel 层，处理业务逻辑并提供数据给 View 层。PhoneBookView则是 View 层，负责显示数据和接收用户输入。

这种分离确保了代码的清晰性和可维护性，同时也使得单元测试变得更加容易。ViewModel 层的引入，使得 View 层只需关注如何展示数据，而业务逻辑则由 ViewModel 层处理，这样可以在不改变 View 层的情况下，重用 ViewModel 层的代码。关注威哥爱编程，争做鸿蒙先锋队员。

发布于: 15 分钟前阅读数: 5

原文链接:【http://xie.infoq.cn/article/ba2ee6c3783721b924d2034ac】。

威哥爱编程

关注

华为 HDE、CSDN 博客专家、Java畅销书作者 2018-05-30 加入

全栈领域优质创作者（Java/HarmonyOS/AI），公众号：威哥爱编程

发布

暂无评论

创作场景

ArkUI 与 MVVM 模式的诗和远方

ArkUI 的 MVVM 工作流程

业务场景案例：电话簿应用

1. Model 层

2. ViewModel 层

3. View 层

最后小结一下

威哥爱编程

评论