Jetpack Compose 魔法棒：Modifier 的奇妙冒險

作者：Reathin 2025-05-26 08:24:45

你的UI化妝師已上線 ??，Jetpack Compose就像樂高積木，而Modifier就是給你的積木塊貼貼紙的神奇膠帶！想讓按鈕穿新衣？給文本框加特效？看這位"UI化妝師"如何施展魔法。

你的UI化妝師已上線 ??，Jetpack Compose就像樂高積木，而Modifier就是給你的積木塊貼貼紙的神奇膠帶！想讓按鈕穿新衣？給文本框加特效？看這位"UI化妝師"如何施展魔法。

基礎化妝包：新手必學咒語

尺寸變形術

// 固定尺寸的魔法藥水
Box(
    modifier = Modifier
        .size(200.dp)   // 魔杖一揮，200x200的結界
        .background(Color.LightGray)
) {
    Text("我是方盒子")   // 被困在結界里的文字
}

// 充氣魔法（充滿父容器）
Button(
    onClick = { /* 咒語 */ },
    modifier = Modifier.fillMaxWidth()  // 橫向充氣到最大
) {
    Text("胖胖按鈕")
}

圖片

色彩魔法

// 漸變色咒語
Box(
    modifier = Modifier
        .background(
            Brush.verticalGradient(  // 從上到下的彩虹瀑布
                colors = listOf(Color.Red, Color.Yellow, Color.Green)
            )
        )
        .padding(16.dp)
) {
    Text("彩虹橋", color = Color.White)
}

// 邊框魔法陣
Box(
    modifier = Modifier
        .border(4.dp, Color.Magenta, CircleShape)  // 圓形粉色魔法陣
        .size(120.dp)
)

圖片

進階黑魔法

影分身之術

var isExpanded by remember { mutableStateOf(false) }

Box(
    modifier = Modifier
        .clickable { isExpanded = !isExpanded }  // 點擊觸發咒語
        .scale(if (isExpanded) 2felse1f)      // 放大兩倍
        .rotate(if (isExpanded) 360felse0f)  // 旋轉特效
        .background(Color.Cyan)
        .size(100.dp)
) {
    Text(if (isExpanded) "Boom!"else"點我")
}

圖片

圖層控制術

Box {
    // 紅色卡片（z軸位置2層）
    Box(
        modifier = Modifier
            .zIndex(2f)
            .offset(x = 20.dp, y = 20.dp)
            .size(100.dp)
            .background(Color.Red)
    )

    // 藍色卡片（z軸位置1層）
    Box(
        modifier = Modifier
            .zIndex(1f)
            .size(100.dp)
            .background(Color.Blue)
    )
}

圖片

Modifier的魔法原理

想象Modifier就像制作漢堡包：

? 先放面包底 (padding)
? 加生菜 (background)
? 放肉餅 (size)
? 淋醬汁 (clickable)
? 蓋上面包頂 (shadow)

每個修飾符都會在前一個的基礎上加工：

// 魔法漢堡制作流程
Modifier
    .padding(8.dp)        // 第一步：加包裝紙
    .background(Color.Magenta) // 第二步：涂奶油
    .size(200.dp)         // 第三步：定型
    .clickable { }        // 第四步：裝感應芯片
    .shadow(4.dp)        // 第五步：撒金粉

魔法小抄表

咒語	效果	示例
.size	定尺寸	設置精確寬高
.fillMaxWidth	橫向充氣	占滿橫向空間
.border	畫邊框	圓形/方形邊框
.zIndex	圖層控制	元素疊放順序
.rotate	旋轉特效	45度傾斜
.verticalScroll	縱向卷軸	創建可滾動區域

成為Modifier大法師的秘訣

? 順序很重要：先加邊框再設置尺寸，效果完全不同！
? 組合技最強大：試試padding+background制造立體感
? 動態魔法：和remember{mutableStateOf()}搭配使用
? 官方魔法書：Jetpack Compose官方文檔（https://developer.android.com/jetpack/compose）

現在拿起你的魔法棒（鍵盤），開始創造驚艷的UI魔法吧！遇到問題記得喊咒語："Google大法好！" ??

源碼https://github.com/Reathin/Sample-Android/tree/master/module_compose_modifier

責任編輯：武曉燕來源：沐雨花飛碟