ArkUI與MVVM模式的詩和遠方

威哥爱编程發表於2024-12-04
UIMVVM模式

大家好，我是 V 哥。今天的內容我們來聊一聊 MVVM 模式在 鴻蒙原生應用開發中的使用， 比如做過 Android開發的兄弟應該清楚，MVVM（Model + View + ViewModel）模式是一種設計模式，用於分離應用程式的業務邏輯、使用者介面和資料模型。這種模式特別適用於構建富客戶端應用程式，如桌面或移動應用。在MVVM模式中，每個部分都有其特定的職責。

ArkUI的MVVM工作流程

先來看一下 MVVM 的基本概念

  1. Model（模型）：代表應用程式的資料結構和業務邏輯。它負責儲存資料以及可能的資料驗證、資料轉換等。

  2. View（檢視）：使用者介面，負責顯示資料（Model）和接收使用者互動。

  3. 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();
  }
}

解釋一下

  • PhoneBookView結構體定義了電話簿應用的UI。
  • 使用ForEach迴圈遍歷viewModel中的所有聯絡人，併為每個聯絡人建立一個包含姓名和電話的Row容器。
  • 為每個聯絡人新增點選事件，當點選時，將該聯絡人設定為選中狀態。
  • 如果有選中的聯絡人，顯示其詳細資訊和一個刪除按鈕。
  • 刪除按鈕的點選事件會呼叫viewModel的deleteContact方法來刪除選中的聯絡人，並清除選中狀態。

最後小結一下

在這個案例中，AddressBook和Person類構成了Model層，負責儲存和處理電話簿資料。PhoneBookViewModel作為ViewModel層，處理業務邏輯並提供資料給View層。PhoneBookView則是View層，負責顯示資料和接收使用者輸入。

這種分離確保了程式碼的清晰性和可維護性，同時也使得單元測試變得更加容易。ViewModel層的引入，使得View層只需關注如何展示資料，而業務邏輯則由ViewModel層處理，這樣可以在不改變View層的情況下，重用ViewModel層的程式碼。關注威哥愛程式設計，爭做鴻蒙先鋒隊員。

相關文章