Android Compose UI Modifiers

Modifier 是 Compose 中最強大的工具之一。它能讓你裝飾或擴充 Composable 的行為，例如：設定大小、背景、點擊事件、捲動、邊框等。

幾乎所有的 Composable 函式都接受一個 modifier 參數。

Text(
    text = "Hello",
    modifier = Modifier
        .padding(16.dp)
        .clickable { }
        .background(Color.Gray)
)

鏈式調用 (Chaining) 與順序的重要性

Modifier 是透過鏈式調用來組合的。順序非常重要，不同的順序會產生完全不同的結果。

範例：Padding 與 Background 的順序

想像你要製作一個有背景色且帶有內距的按鈕。

情況 A：先 Background 再 Padding

Text(
    "Hello",
    modifier = Modifier
        .background(Color.Red) // 1. 先填滿紅色
        .padding(16.dp)        // 2. 再往外推 16dp
)

結果：紅色背景只包住文字，padding 在紅色背景之外（透明）。

情況 B：先 Padding 再 Background

Text(
    "Hello",
    modifier = Modifier
        .padding(16.dp)        // 1. 先預留 16dp 空間
        .background(Color.Red) // 2. 將整個空間填滿紅色
)

結果：紅色背景包住了文字以及 16dp 的內距。

範例：點擊區域 (Clickable)

clickable 的位置決定了可點擊的區域大小。通常放在 padding 之前還是之後，取決於你想讓 padding 區域是否可被點擊。

常用 Modifier

• 尺寸：
  • size(width, height): 固定大小。
  • fillMaxSize(fraction): 填滿父容器。
  • wrapContentSize(): 包覆內容。
  • width(dp), height(dp)。
• 外觀：
  • background(Color): 背景色。
  • border(width, color): 邊框。
  • clip(Shape): 裁切形狀 (RoundedCornerShape, CircleShape)。
  • alpha(Float): 透明度。
• 佈局：
  • padding(dp): 內距/外距 (Compose 不區分 margin/padding，統稱 padding)。
  • offset(x, y): 偏移位置。
• 互動：
  • clickable { }: 點擊事件。
  • scrollable(...): 捲動行為。

Scoped Modifiers (作用域限定的 Modifier)

有些 Modifier 只能在特定的 Parent Layout 中使用。這是透過 Kotlin 的 Extension Function 加上 Receiver 來實現的。

• BoxScope：只有在 Box 內可以使用 Modifier.align(...)。
• ColumnScope：只有在 Column 內可以使用 Modifier.weight(...) 和 Modifier.align(Alignment.Horizontal)。
• RowScope：只有在 Row 內可以使用 Modifier.weight(...) 和 Modifier.align(Alignment.Vertical)。

這就是為什麼你不能在 Row 裡面寫 align(Alignment.Center)，編譯器會報錯，因為 RowScope 沒有提供這個功能。

重用 Modifier

Modifier 是不可變的物件。你可以將常用的 Modifier 組合定義為變數，隨處重用：

val cardModifier = Modifier
    .fillMaxWidth()
    .padding(8.dp)
    .clip(RoundedCornerShape(8.dp))
    .background(Color.White)
    .shadow(4.dp)

Card(modifier = cardModifier) { ... }
Box(modifier = cardModifier) { ... }

小結

• Modifier 是裝飾者模式的應用。
• 順序決定一切：由外而內，層層包裹。
• 善用 Scope 限定的 Modifier 來控制佈局。

掌握 Modifier 的順序邏輯，是排版出完美 UI 的關鍵。