練習:在 Dessert Clicker 中新增 ViewModel

1. 事前準備

簡介

Dessert Clicker 支援內嵌狀態和資料。在本練習中,您要將內嵌狀態、資料和邏輯從 MainActivity 移至 ViewModel

將應用程式邏輯從檢視區塊移到 ViewModel,是新型的 Android 開發做法,優點如下:

  • 其他開發人員更容易理解程式碼內容。
  • 程式碼更易於測試。
  • 多位開發人員可同時合作開發應用程式,不會對彼此造成干擾。

雖然解決方案程式碼就在這個練習的結尾處,但請先試著解決練習中的問題,再查看答案。請將解決方案當成實作應用程式的其中一種方式。

必要條件

軟硬體需求

  • 已安裝 Android Studio 且連上網路的電腦
  • Dessert Clicker 應用程式的解決方案程式碼

建構項目

在這些練習題中,您要新增用於處理資料和應用程式邏輯的 ViewModel,改善 Dessert Clicker 應用程式的架構。

練習題分為幾個部分,您將在其中分別完成以下步驟:

  • 更新及新增必要的依附元件。
  • 建立 ViewModel 類別。

2. 下載範例程式碼

  1. 在 Android Studio 中開啟 basic-android-kotlin-compose-training-dessert-clicker 資料夾。
  2. 在 Android Studio 中開啟 Dessert Clicker 應用程式程式碼。

3. 設定依附元件

  1. 在專案的 build.gradle 檔案中加入以下變數:
buildscript {
   ext {
       ...
       lifecycle_version = '2.5.1'
   }
}
  1. app/build.gradle 檔案中加入以下依附元件:
dependencies {
    ...implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
}

4. 建立 UI 狀態類別

MainActivity 中的 DessertClickerApp() 可組合函式目前包含可驅動 UI 的資料和狀態。

請建立資料類別,保留 UI 所需的全部資料。該類別中的資料會取代 DessertClickerApp() 可組合函式目前管理的資料。

5. 建立 ViewModel

請使用 Jetpack ViewModel 元件建立 ViewModel 類別。您可以使用 ViewModel 管理 UI 狀態。

6. 將應用程式邏輯和資料移至 ViewModel

請將 MainActivity 中的邏輯移至 ViewModel,並使用您建立的 UI 狀態類別讓 UI 狀態資料可供存取。請刪除 MainActivity 中的所有資料和狀態管理邏輯。

建議您試著自行完成這項工作。如有需要,可以參考「Compose 中的 ViewModel 和狀態」程式碼研究室。

7. 呼叫 ViewModel

請使用 ViewModel 提供的資料和方法,驅動 MainActivity 中的 UI。

8. 解決方案程式碼