玩轉Jetpack Compose尺寸魔法：從入門到上頭指南
作者：Reathin
今天我們來聊聊Compose布局中的"尺寸操控術"。就像玩俄羅斯方塊，掌握這些尺寸修飾符能讓你的UI元素完美卡位！
大家好呀~ 今天我們來聊聊Compose布局中的"尺寸操控術"。就像玩俄羅斯方塊，掌握這些尺寸修飾符能讓你的UI元素完美卡位！(? ?_?)?
基礎篇：新手村必學技能
1. 黃金搭檔：size + padding
Box(
modifier = Modifier
.size(120.dp) // 設置固定黃金比例尺寸
.background(Color(0xFFF4D03F)) // 蜂蜜金背景
.padding(16.dp) // 呼吸空間
) {
Text("VIP座席",
style = MaterialTheme.typography.headlineMedium,
color = Color.White)
}
圖片
小貼士：這就像給手機貼膜——先確定屏幕尺寸（size），再留出邊緣空隙（padding）
2. 滿屏暴擊：fillMaxSize
Box(
modifier = Modifier
.fillMaxSize(0.85f) // 霸占85%的屏幕
.background(Color(0xFF6C5CE7)) // 神秘紫背景
) {
Text("沉浸模式",
modifier = Modifier.align(Alignment.Center),
color = Color.White)
}
圖片
應用場景：適合全屏彈窗、詳情頁等需要視覺沖擊力的場景
進階篇：布局巫師的秘密
3. 智能伸縮：sizeIn
var isExpanded by remember { mutableStateOf(false) }
Box(
Modifier
.sizeIn(
minWidth = 80.dp, // 最小安全尺寸
maxWidth = 200.dp, // 最大膨脹尺寸
minHeight = 40.dp,
maxHeight = 120.dp
)
.background(Color(0xFF00B894)) // 薄荷綠
.clickable { isExpanded = !isExpanded }
) {
Text(if(isExpanded) "收縮吧！"else"膨脹吧?。。。?！",
Modifier.padding(16.dp))
}
圖片
舉個栗子：就像可伸縮的魔術口袋，既能裝下鑰匙串，也能塞進礦泉水瓶
4. 內容優先：wrapContentSize
Row(Modifier.background(Color.LightGray)) {
Box(
Modifier
.wrapContentSize(Alignment.TopEnd) // 讓內容決定大小
.background(Color(0xFFE84393)) // 櫻花粉
) {
Text("New", Modifier.padding(4.dp))
}
Text(" 限定款球鞋", style = MaterialTheme.typography.bodyLarge)
}
圖片
實戰技巧：適合小紅點、角標等需要自適應內容大小的場景
大師篇：尺寸操控終極奧義
5. 精準控制：requiredSize vs size
Column {
// 倔強青銅（requiredSize）
Box(Modifier.requiredSize(80.dp).background(Color.Red))
// 秩序白銀（size）
Box(Modifier.size(80.dp).background(Color.Blue))
// 榮耀黃金（父布局約束下）
Box(Modifier.size(80.dp).padding(10.dp).background(Color.Green))
}
圖片
冷知識：requiredSize就像霸道總裁："我就要這么大！"，普通size則是暖男："可以按需要調整~"
6. 組合技示例：打造完美卡片
Card(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.heightIn(min = 120.dp, max = 240.dp),
colors = CardDefaults.cardColors(containerColor = Color.White)
) {
Box(Modifier.fillMaxSize()) {
Image(
painter = painterResource(R.drawable.img),
contentDescription = null,
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
Box(
Modifier
.align(Alignment.BottomEnd)
.padding(8.dp)
.size(48.dp)
.clip(CircleShape)
.background(Color.Red)
) {
Icon(
Icons.Default.ShoppingCart,
contentDescription = "購買",
modifier = Modifier.size(24.dp).align(Alignment.Center),
tint = Color.White
)
}
}
}
圖片
彩蛋：常用尺寸對照表
修飾符 | 適用場景 | 類比說明 |
fillMaxSize | 全屏彈窗/背景 | 霸道總裁式占滿 |
sizeIn | 自適應文本容器 | 能屈能伸的橡皮筋 |
requiredSize | 固定尺寸圖標 | 說一不二的尺子 |
wrapContentSize | 浮動提示標簽 | 量體裁衣的裁縫 |
最后送大家一句Compose心法口訣：
"父問子要多大的，子說我想這么大。父說最多給這些，最終尺寸商量定！"
源碼：https://github.com/Reathin/Sample-Android/tree/master/module_compose_size
責任編輯：武曉燕
來源：
沐雨花飛碟
