iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0

https://ithelp.ithome.com.tw/upload/images/20220912/20151958IFjRs0xIZ4.png Medium 好讀版

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

https://ithelp.ithome.com.tw/upload/images/20220907/20151958vXuPLv4aki.png 立馬下載 https://ithelp.ithome.com.tw/upload/images/20220907/20151958LtM1NGErzK.png 索取兌換碼

細看一個簡單的 composable function

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

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

  • 這個函式會加上 @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」
    • 在不使用全域變數或 random() 的情況下,如果以相同的參數多次呼叫這個函式,函式的運作方式將維持不變。
    • 這個函式可描述 UI,而沒有任何 side effect,例如修改屬性或全域變數。

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

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

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

https://ithelp.ithome.com.tw/upload/images/20220907/20151958vXuPLv4aki.png 立馬下載 https://ithelp.ithome.com.tw/upload/images/20220907/20151958LtM1NGErzK.png 索取兌換碼

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


上一篇
「宣告式」程式框架
下一篇
宣告式程式框架的變革
系列文
Kimoji:以 Jetpack Compose 實作一款「心情日記」應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言