Compose Layouts

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

Sep 2, 2022

UI 元件具有階層結構，在元件中可以包含其他元件。在 Compose 中，我們可以在 composable functions 中呼叫 composable functions，藉此建構 UI 階層。

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

新增多個文字

在上一篇文章中，我們已經建構了一個 composable function 也實作了 preview。為了探索更多 Jetpack Compose 功能，我們會建構簡單的日記畫面，並在上面顯示可以一些動畫效果展開的日記列表。
首先，為了讓日記 composable 更豐富，我們要在上面顯示「情緒」和「筆記」。我們必須先將 composable 參數從接受 String 變更為接受 Diary 物件，並在 DiaryCard 中新增另一個 Text composable。preview 畫面也需要一併更新。

這段程式碼會在 content view 中建立兩個文字元件。不過，由於我們並沒有提供任何排列方式的相關資訊，因此這兩個文字元素會彼此重疊，導致文字無法閱讀。

使用 Column
Column 函式可讓您垂直排列元件。將 Column 新增至 DiaryCard 函式。
我們還可以使用 Row 水平排列項目，或是使用 Box 來堆疊元件。

新增圖片元件
為了讓日記內容更豐富，我們來加一張代表情緒的 emoji。使用 Resource Manager 來匯入圖片。新增 Row composable 以刻畫好看的排版，並在這個composable 中新增 Image composable。

設定排版
我們的日記排版雖然版面適當，但元件之間的間距並不合理！Compose 使用 modifier 來裝飾或設定 composable。Modifier 可以變更 composable 的大小、版面配置、外觀或加入進階互動，例如使元件變得可點擊。我們可以將這些 modifier 鏈結起來，以產生更為複雜的 composables。我們將使用其中一些 modifier 來改善排版。