Compose 踩坑記 (1)

發表於 更新於 分類於 ，

最近發現 Jetpack Compose 版本已經到了 release 1.1.1，也是時候來學學現在很熱門的宣告式 UI。

目前踩到的坑有：

  • Row 與 Column 中的 Arrangement 與 Alignment

Row 與 Column 中的 Arrangement 與 Alignment

看了些教學後開始嘗試 CenterHorizontally 這個屬性，但怎麼弄都顯示 Unresolved reference: CenterHorizontally，確認過 compose 版本也沒問題，最後在 Compose layout basics 中發現一段話：

To set children’s position within a Row, set the horizontalArrangement and verticalAlignment arguments. For a Column, set the verticalArrangement and horizontalAlignment arguments.

這兩個詞很像，沒仔細看還真的沒發現，有 Arrangement 和 Alignment，當要使用 Center... 這個屬性時，依照 Row 或 Column 把前面換成對應的 ...Alignment 即可

Row 要這樣用

1
2
3
4
5
6
7
Row(
    modifier = Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.Center, 
    verticalAlignment = Alignment.CenterVertically
) {
    // ...
}

Column 要這樣用

1
2
3
4
5
6
7
Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    // ...
}