Compose 中 Column、Row、Box 是最核心的三大布局组件，就像积木一样搭建界面。 配合 Modifier 可以控制大小、边距、背景、点击等一切样式。让我们用最直观的方式学会它们！

🧱 三大布局组件

组件	方向	类比 (传统View)	典型用途
Column	垂直排列 (从上到下)	LinearLayout (vertical)	列表、表单、纵向信息流
Row	水平排列 (从左到右)	LinearLayout (horizontal)	按钮组、标签栏、头像行
Box	层叠 (子组件重叠)	FrameLayout	徽章、遮罩、绝对定位

✨ Modifier 是什么？

• 装饰/增强 — 给组件添加大小、边距、背景、点击、旋转等效果。
• 链式调用 — 例如 Modifier.padding(16.dp).background(Color.Yellow)
• 顺序敏感 — 先 padding 再 background 与先 background 再 padding 效果不同。
• 无处不在 — 几乎每个 Composable 的第一个可选参数就是 modifier。

🧩 布局与 Modifier 协作图

📟 基础代码示例

🔹 Column + Modifier

@Composable
fun MyColumn() {
    Column(
        modifier = Modifier
            .padding(16.dp)
            .background(Color(0xFFF7D9AA))
            .border(2.dp, Color(0xFF3F5B7A), shape = RoundedCornerShape(12.dp))
            .padding(12.dp)
    ) {
        Text("📘 语文", fontSize = 20.sp)
        Text("📗 数学", fontSize = 20.sp)
        Text("📕 英语", fontSize = 20.sp)
    }
}

🔹 Row + Modifier 权重

@Composable
fun MyRow() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 12.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text("⭐ 点赞", modifier = Modifier.weight(1f))
        Text("💬 评论", modifier = Modifier.weight(1f))
        Text("🔗 分享", modifier = Modifier.weight(1f))
    }
}

🔹 Box 层叠 + Modifier 对齐

@Composable
fun MyBox() {
    Box(
        modifier = Modifier
            .size(120.dp)
            .background(Color(0xFFB7D7E8), shape = CircleShape),
        contentAlignment = Alignment.Center
    ) {
        Text("🎯", fontSize = 40.sp)
        // 右上角小徽章
        Box(
            modifier = Modifier
                .align(Alignment.TopEnd)
                .size(28.dp)
                .background(Color.Red, shape = CircleShape),
            contentAlignment = Alignment.Center
        ) {
            Text("3", color = Color.White, fontSize = 14.sp)
        }
    }
}

📋 常用 Modifier 速查

Modifier	作用	示例
padding	内边距	.padding(12.dp)
background	背景颜色/形状	.background(Color.Yellow, shape = CircleShape)
size / width / height	尺寸	.size(48.dp)
border	边框	.border(2.dp, Color.Gray, RoundedCornerShape(8.dp))
clickable	点击交互	.clickable { /* 点击事件 */ }
fillMaxWidth / fillMaxHeight	填充最大宽/高	.fillMaxWidth(0.8f)
weight	权重 (仅 Row/Column 内)	.weight(1f)

✏️ 动手试一试

• 用 Column 做一个垂直的“课程表”
• 用 Row + weight 实现三等分按钮
• 用 Box 制作头像 + 在线绿点