雖然看了這麼多元件，但在實作 UI 時，通常會組合多個元件，為了讓 UI 清楚、易懂、好看，如何排版元件就變得很重要了！若讀者曾自行把多個元件放在 Window 裡應該會發現，元件都會疊在一起無法使用，這是因為沒有跟 Compose 說明要怎麼排版這些元件。在今年的耕讀筆記，就要來研究一下幾個最常用的排版元件的使用方式。

Column 元件

我們所使用的顯示裝置大多都是矩型的空間，因此在排版上通常都會將元件依矩型空間縱排或橫排。若要將元件縱排，可使用 Column 元件。Column 元件除了 content 參數是必填外，其餘的參數都有預設值，因此可以很簡單直覺的使用：

Column {
    Text(text = "...",fontSize = 20.sp)
    Text(text = "...")
}

讀者可以比較一下，若上例的兩個 Text 元件沒有放在 Column 內的話，顯示時會疊在一起。由此可見，Column 是將元件以縱向的順序排列。

設定 Column 元件裡的垂直排列與水平對齊

預設 Column 會將其內元件以靠上及靠左對齊排列，若想要修改這個排列組合，可以透過 verticalArrangement 及 horizontalAlignment 兩個參數來設定垂直及水平對齊方式。不過要注意的是，若沒有設定 Column 元件尺寸的話，Compose 會不知道以多少空間來計算元件的排列及對齊，因此通常會再以 Modifier 來設定 Column 的寬高：

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Text(text = "...", fontSize = 20.sp)
    Text(text = "...")
}

在上例裡，我們將 Column 的垂直及水平對齊方式皆設為置中，並以 Modifier 將 Column 的內部空間撐到跟 Window 一樣大，因此可以看到兩行字會放在整個視窗的正中央。

Column 支援的垂直排列方式有：

• Top：靠上。
• Center：置中。
• Bottom：靠下。
• SpaceEvenly：水平等距分配（左右也算）。
• SpaceBetween：水平等距分配（不算左右）。
• SpaceAround：水平等距分配（左右定值不均分）。

Column 支援的水平對齊方式有：

• Start：靠左。
• CenterHorizontally：置中。
• End：靠右。

若不清楚這些設定的差別，可參考 Jetpack Compose 官方文件裡的動畫：

Row 元件

看過 Column 後，就更容易理解 Row 的作用了。Column 是將元件垂直排，Row 則是將元件水平排。比方說將三個 Icon 放在 Row 裡，就可以看到三個圖示依照程式碼由上往下的順序，對應到 UI 裡由左至右的排列：

Row {
    Icon(
        imageVector = Icons.Filled.Favorite,
        contentDescription = "Favorite Icon"
    )
    Icon(
        imageVector = Icons.Filled.Lock,
        contentDescription = "Lock Icon"
    )
    Icon(
        imageVector = Icons.Filled.Share,
        contentDescription = "Share Icon"
    )
}

設定 Row 元件裡的垂直對齊與水平排列

Row 預設也是將其內元件以靠上及靠左對齊排列，若想要修改這個排列組合，我們可以透過 verticalAlignment 及 horizontalArrangement 兩個參數來設定垂直及水平對齊方式（注意一下參數名稱跟 Column 長得很像但組合方式不同！）。另外，我們一樣要透過 Modifier 將 Row 元件撐大，這樣才看得出對齊效果：

Row(
    modifier = Modifier.fillMaxSize(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceEvenly,
) {
    Icon(
        imageVector = Icons.Filled.Favorite,
        contentDescription = "Favorite Icon"
    )
    Icon(
        imageVector = Icons.Filled.Lock,
        contentDescription = "Lock Icon"
    )
    Icon(
        imageVector = Icons.Filled.Share,
        contentDescription = "Share Icon"
    )
}

Row 支援的垂直對齊方式有：

• Top：靠上。
• CenterVertically：置中。
• Bottom：靠下。

Row 支援的水平排列方式有：

• Start：靠左。
• Center：置中。
• End：靠右。
• SpaceEvenly：水平等距分配（左右也算）。
• SpaceBetween：水平等距分配（不算左右）。
• SpaceAround：水平等距分配（左右定值不均分）。

若不清楚這些設定的差別，可參考 Jetpack Compose 官方文件裡的動畫：

綜合應用

當然實際開會情境會更複雜，透過 Column 與 Row 的層層疊疊，就可以組合出很複雜的介面：

Column(
    modifier = Modifier.width(400.dp).padding(12.dp)
) {
    Text(
        text = "What is Lorem Ipsum?",
        fontSize = 20.sp
    )
    Text(
        text = "Lorem Ipsum is ..."
    )
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceAround
    ) {
        Icon(
            imageVector = Icons.Filled.Favorite,
            contentDescription = "Favorite Icon",
        )
        Icon(
            imageVector = Icons.Filled.Lock,
            contentDescription = "Lock Icon",
        )
        Icon(
            imageVector = Icons.Filled.Lock,
            contentDescription = "Lock Icon",
        )
    }
}

在上面的例子裡，我們做出一個有標題、內文及三個等距並排圖示的 UI，透過排版元件的使用，UI 就可以如我們所想的排列喔！

參考資料

• Jetpack Compose Playground - Column
• Jetpack Compose Playground - Row
• Jetpack Compose - Arrangement