從 ViewModel 使用可觀察的資料流

Kimoji：以 Jetpack Compose 實作一款「心情日記」應用 [26]

5 min readSep 30, 2022

今天的文章中，我們要來介紹如何將 ViewModel expose 的可觀察資料型態接到 Composable 上。我們會示範將 DiaryViewModel 裡的 StateFlow，接到 DiaryScreen Composable，來顯示「日記清單」。

此系列文章是以我的業餘專案： Kimoji 為範例。
這款以純 Jetpack Compose 撰寫的 side project，已經在 Google Play 上架。歡迎試玩！
📥 立馬下載 | | | 🎟️ 限免兌換碼

DiaryViewModel.kt 裡面有個 diaries StateFlow (已初始化為 diaryRepository.getDiaries)。

我們希望每當有新資料 emit 到 diaries StateFlow 時，Diary composable 中的 UI 都會更新。我們可以使用 StateFlow.collectAsState() 函式。在 composable function 中使用 collectAsState() 時，會從 StateFlow collect value，並使用 Compose 的 State API 來將最新的值存起來。這樣會讓讀取該狀態值的 composable 在 StateFlow emit value 時進行 recompose。

在 DiaryScreen composable 將 assign diaries 的那行程式碼替換為呼叫 ViewModel 裡面 diaries property 的 collectAsState：

重新把 app 跑起來，畫面就會顯示「日記清單」。

Compose 也有提供其他可觀察資料型態的 API：
LiveData.observeAsState()
androidx.compose.runtime:runtime-livedata:$composeVersion
Observable.subscribeAsState()
androidx.compose.runtime:runtime-rxjava2:$composeVersion 、androidx.compose.runtime:runtime-rxjava3:$composeVersion

生命週期

我們來探討上面這段 code 一些可觀察資料型態的生命週期。

DiaryScreen composable 上的 diaries 變數：因為定義在 DiaryScreen composable 內，所以生命週期會 follow DiaryScreen 的 Composition。當 DiaryScreen 被移出 Composition 時，diaries 變數就會被清掉。也會停止 collect StateFlow
DiaryViewModel 裡的 diaries StateFlow：因為定義在 DiaryViewModel內，所以生命週期 follow DiaryViewModel。當沒有人觀察這個 StateFlow時，就會終止資料流。當 DiaryViewModel死掉時，diaries StateFlow 也會被清掉。