Medium 好讀版

Jetpack Compose 是 Android 的新型宣告式 UI 套件。Compose 提供「宣告式 API」，透過較少的程式碼、強大的工具和直觀的 Kotlin API，讓我們輕鬆撰寫及維護 app UI。不過在我們開始用 Compose 寫 app 之前，有些術語需要說明一下，這些概念對 app 設計相當重要。

此系列文章是以我的業餘專案： Kimoji 作為範例。
這款以純 Jetpack Compose 撰寫的 side project，已經在 Google Play 上架。 歡迎試玩！

立馬下載	索取兌換碼

「宣告式」程式框架

過去，Android view 的層級能夠以 UI 元件的樹狀結構表示。由於 app 的狀態會依使用者互動等因素而改變，因此 UI 狀態必須被更新以顯示最新的資料。最常見的 UI 更新方式是使用 findViewById() 等函式來搜尋樹狀結構，以及呼叫 button.setText(String)、container.addChild(View) 或 img.setImageBitmap(Bitmap) 等方法來變更 node elements。這些方法會變更 UI 元件的內部狀態。

手動操作 view 還蠻容易出錯的。如果有一份資料給多個 view 去 render，我們很容易會忘記去更新其中一個 view 的資料。如果更新 view 時意外發生 conflict，也很容易造成狀態錯誤。舉例來說，某個 event listener 更新時可能會嘗試 set value 給一個剛從畫面中被移除的 UI 元件。一般來說，軟體維護複雜程度會隨著須更新的 view 數量而增加。

過去幾年來，整個產業紛紛開始改用宣告式 UI 模型，大幅簡化了建構和更新 UI 的工程問題。這項技術會從概念上重新產生整個螢幕畫面，然後只套用必要的變更。這種做法可降低手動更新 view 狀態的複雜性。而 Compose 正是一種宣告式 UI 架構。

重新產生整個螢幕畫面的一大挑戰，就是它在時間、運算量和電池用量的成本可能相當高昂。為減少這類成本，Compose 會聰明地在任一指定時間選擇需要重畫的 UI 部分。這對 UI 元件的設計方式有一些潛在影響，例如我們幾天後要詳細探討的 Recomposition。

此系列文章是以我的業餘專案：Kimoji 為範例。

Kimoji 是一款心情日記 App，讓你用可愛的 emoji 來撰寫你的心情日記。現在就來試試這款設計精美的微日記吧！

立馬下載	索取兌換碼

Reference: https://developer.android.com/jetpack/compose/mental-model