Compose 清單和動畫

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

5 min readSep 4, 2022

清單和動畫會出現在 app 中的任何地方。在本文章中，我們將瞭解如何運用 Compose 輕鬆建立清單，並增添動畫效果。

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

建立日記列表
只顯示一篇日記會感覺有點孤單，因此我們可以新增「日記本」以便包含多篇日記。我們必須建立 Journal 函式，以顯示多篇日記。針對這個使用情境，我們用 Compose 的 LazyColumn 和 LazyRow。這些 composable 只會 render 螢幕上可視的元件，因此這些 composable 的設計，對於較長的清單來說，可以得到非常優良的效能。
在下面這段程式碼中，我們可以看到 LazyColumn 含有一個 child items。它接受 List 做為參數，而他的 lambda 會收到一個叫做 diary 的參數（可以隨意為其命名），也就是 Diary 的實體。簡單來說，List 中的每個 item 都會呼叫這個 lambda。將這份範例資料匯入我們的專案，即可快速建構日記本。

展開日記時顯示動畫效果
我們的日記現在變得更豐富了。現在是時候製作動畫了！我們將新增展開日記來顯示更多內容的功能，同時為內容大小和背景顏色製作動畫效果。如要儲存此 local UI state，我們必須記住日記是否已展開。我們必須使用 remember 和 mutableStateOf 函式來追蹤這種狀態變化。
Composable functions 可以使用 remember 將 local state 儲存在記憶體中，並觀察 mutableStateOf 之 value 的變化。該值更新時，系統會自動重新繪製有讀取這個狀態的 composables (和他們的 children)。這就稱為recomposition。
透過使用 Compose 的狀態 API（例如 remember 和 mutableStateOf），系統會在狀態發生任何變更時自動更新 UI。

注意：我們必須新增下列的 import，才能正確使用 by。按 Alt + Enter 或 Option + Enter 鍵，即可新增這些項目。
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

現在，當按一下日記時，即可根據 isExpanded 變更筆記內容的背景。我們將使用 clickable modifier 來處理 composable 中的點擊事件。這次我們不需要再切換 Surface 的背景顏色，而是以動畫方式逐步將背景顏色從 MaterialTheme.colors.surface 變更為 MaterialTheme.colors.primary（反之亦然）。為了做到這點，我們將使用 animateColorAsState 函式。最後，使用 animateContentSize modifier，流暢地為筆記大小製作動畫：