Android Compose UI 佈局 (Column, Row, Box)

在 Compose 中，我們不使用 XML 佈局檔（如 LinearLayout, RelativeLayout）。取而代之的是，我們使用 Kotlin 的 Layout Composables 來排列元件。

最基礎的三大金剛是：Column, Row, Box。

Column (垂直排列)

Column 將子元件垂直堆疊，類似 LinearLayout (vertical)。

Column(
    modifier = Modifier.padding(16.dp),
    verticalArrangement = Arrangement.Center, // 垂直置中
    horizontalAlignment = Alignment.CenterHorizontally // 水平置中
) {
    Text("Title")
    Text("Subtitle")
    Button(onClick = {}) { Text("Click") }
}

常用屬性

• verticalArrangement：控制子元件在垂直軸上的分佈（Top, Bottom, Center, SpaceEvenly, SpaceBetween, SpaceAround）。
• horizontalAlignment：控制子元件在水平軸上的對齊（Start, End, CenterHorizontally）。

Row (水平排列)

Row 將子元件水平排列，類似 LinearLayout (horizontal)。

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween, // 左右分散對齊
    verticalAlignment = Alignment.CenterVertically // 垂直置中
) {
    Text("Left")
    Text("Right")
}

常用屬性

• horizontalArrangement：控制子元件在水平軸上的分佈。
• verticalAlignment：控制子元件在垂直軸上的對齊（Top, Bottom, CenterVertically）。

Box (堆疊排列)

Box 將子元件堆疊在彼此上方，類似 FrameLayout。通常用於放置背景圖片，或在右上角顯示 Badge。

Box(
    modifier = Modifier.size(100.dp),
    contentAlignment = Alignment.Center // 預設對齊方式
) {
    Image(painter = painterResource(id = R.drawable.bg), contentDescription = null)
    Text("Overlay Text") // 會顯示在圖片上方
}

Modifier.align

在 Box 內部的子元件，可以使用 Modifier.align 來個別指定位置：

Box(modifier = Modifier.fillMaxSize()) {
    Text("TopLeft", modifier = Modifier.align(Alignment.TopStart))
    Text("Center", modifier = Modifier.align(Alignment.Center))
    Text("BottomRight", modifier = Modifier.align(Alignment.BottomEnd))
}

Weight (權重)

在 Column 或 Row 中，我們可以使用 Modifier.weight 來分配剩餘空間（類似 LinearLayout 的 weight）。

Row(modifier = Modifier.fillMaxWidth()) {
    // 佔用 1 等份
    Box(modifier = Modifier.weight(1f).background(Color.Red))
    // 佔用 2 等份 (紅色寬度的兩倍)
    Box(modifier = Modifier.weight(2f).background(Color.Blue))
}

總結

• Column：由上到下。
• Row：由左到右。
• Box：前後堆疊。

只要靈活運用這三個基礎容器，配合 Modifier，你就能構建出絕大多數的複雜介面。