当前位置：首页 > 移动端开发 > 正文内容

ArkUI与MVVM形式的诗和远方

邻居的猫1个月前 (12-09)移动端开发1880

大家好，我是 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.ts
export 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.ts
import { 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";

@ViewModel
class 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装修器符号这个结构体为一个组件
@Component
struct 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装修器符号这个组件为页面的进口组件
@Entry
struct Main {
  build() {
    PhoneBookView();
  }
}

解释一下