Compose 的程式設計概念

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

John Lu
Sep 5, 2022

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

細看一個簡單的 composable function

我們可以透過 Compose 來建構 UI,具體做法是定義一組 composable functions,負責接收資料及輸出 UI 元件。一個簡單的範例為 DiaryCard 元件,在接收 String 後會輸出 Text 元件,以顯示日記。

一個簡單的 composable function,可使用所接收到的資料在螢幕畫面上畫出文字元件。

關於這個函式的一兩件事情:

  • 這個函式會加上 @Composable 標籤。所有 Composable function 都必須包含這個標籤,來告訴 Compose compiler,這個函式的作用是將資料轉換為 UI。
  • 這個函式會接收資料。Composable function 可以接受參數,來讓 app 邏輯描述 UI。在這個範例中,我們的日記元件接受 String參數,進而能夠顯示不同的心情。
  • 這個函式會在 UI 中顯示文字。具體做法是呼叫 Text() composable function,透過該函式實際建立文字 UI 元件。Composable functions 會藉由呼叫其他 Composable functions 來輸出 UI 階層結構。
  • 這個函式不會傳回任何內容。輸出 UI 的 Compose 函式不必傳回任何內容,原因是這類函式的作用是描述螢幕畫面所需的狀態,而不是建構 UI 元件。
  • 這個函式具有快速、idempodent 的特性,而且沒有任何「side effect」
  1. 在不使用全域變數或 random() 的情況下,如果以相同的參數多次呼叫這個函式,函式的運作方式將維持不變。
  2. 這個函式可描述 UI,而沒有任何 side effect,例如修改屬性或全域變數。

一般來說,所有 composable function 都應使用這些屬性撰寫,詳細原因我們會在幾天後的 Recomposition 主題中探討。

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

Kimoji 是一款心情日記 App,讓你用可愛的 emoji 來撰寫你的心情日記。現在就來試試這款設計精美的微日記吧!
📥 立馬下載 | | | 🎟️ 索取兌換碼

--

--

John Lu
John Lu

Written by John Lu

AI Engineer. Deeply motivated by challenges and tends to be excited by breaking conventional ways of thinking and doing. He builds fun and creative apps.