44. Compose 布局基础

三大布局组件

Compose 的布局只有三个核心组件，简单但组合起来能搭出任何界面：

• Column：子元素垂直排列（从上到下）
• Row：子元素水平排列（从左到右）
• Box：子元素堆叠（一层叠一层）

打个比方：Column 像书架竖着放书，Row 像桌面横着摆东西，Box 像三明治把东西叠在一起。

Column 垂直排列

@Composable
fun ColumnExample() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("第一行")
        Text("第二行")
        Text("第三行")
    }
}

两个关键参数：

• verticalArrangement：子元素在垂直方向怎么排（间距、对齐）
• horizontalAlignment：子元素在水平方向怎么对齐

排列方式（Arrangement）

Arrangement	效果
Center	居中
Start / Top	靠起始边
End / Bottom	靠末尾边
SpaceBetween	首尾贴边，中间均匀分布
SpaceEvenly	所有间距完全相等
SpaceAround	每个元素两侧间距相等
spacedBy(16.dp)	固定间距

Column(
    verticalArrangement = Arrangement.spacedBy(16.dp)
) {
    Text("项目一")
    Text("项目二")
    Text("项目三")
}

Row 水平排列

Row 和 Column 是镜像关系。它的参数名相反：

• horizontalArrangement：水平方向排列
• verticalAlignment：垂直方向对齐

@Composable
fun ProfileRow() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text("用户名")
        Text("积分：100")
    }
}

Box 堆叠

Box 把子元素叠在一起，后面的盖在前面上面。用 Alignment 控制每个子元素的位置：

@Composable
fun BadgeExample() {
    Box {
        Icon(
            Icons.Default.Notifications,
            contentDescription = "通知"
        )
        Text(
            "3",
            modifier = Modifier.align(Alignment.TopEnd)
        )
    }
}

Modifier.align() 在 Box 内部控制对齐位置，支持 TopStart、TopEnd、BottomStart、Center 等九个方位。

Spacer 间距

Spacer 是纯占位组件，用 Modifier.width() 或 Modifier.height() 控制大小：

Column {
    Text("标题")
    Spacer(modifier = Modifier.height(16.dp))
    Text("内容")
}

weight 权重

Modifier.weight() 让子元素按比例分配剩余空间。只在 Column 和 Row 的直接子元素中可用：

@Composable
fun WeightExample() {
    Row(modifier = Modifier.fillMaxWidth()) {
        Box(
            modifier = Modifier
                .weight(1f)
                .height(50.dp)
                .background(Color.Red)
        )
        Box(
            modifier = Modifier
                .weight(2f)
                .height(50.dp)
                .background(Color.Green)
        )
        Box(
            modifier = Modifier
                .weight(1f)
                .height(50.dp)
                .background(Color.Blue)
        )
    }
}

三个 Box 按 1:2:1 分配宽度。

嵌套组合

实际界面都是嵌套的。一个常见的列表项卡片：

@Composable
fun ContactItem(name: String, message: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 头像
        Box(
            modifier = Modifier
                .size(48.dp)
                .clip(CircleShape)
                .background(Color.Blue),
            contentAlignment = Alignment.Center
        ) {
            Text(
                name.take(1),
                color = Color.White
            )
        }
        Spacer(modifier = Modifier.width(12.dp))
        // 文字信息
        Column(modifier = Modifier.weight(1f)) {
            Text(name, fontWeight = FontWeight.Bold)
            Text(
                message,
                color = Color.Gray,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
    }
}

这段代码的结构是：Row（横向）里放 Box（头像）+ Spacer + Column（纵向文字）。Column 用 weight(1f) 占满剩余宽度，消息文字 maxLines = 1 加 Ellipsis 超出显示省略号。

常用尺寸 Modifier

Modifier	作用
fillMaxWidth()	宽度填满父容器
fillMaxHeight()	高度填满父容器
fillMaxSize()	全部填满
width(100.dp)	固定宽度
height(50.dp)	固定高度
size(48.dp)	固定宽高相同
wrapContentWidth()	宽度包裹内容
weight(1f)	按比例分配（仅 Row/Column 子项）

对齐 vs 排列

容易混淆的两个概念：

• Alignment（对齐）：单个元素在容器里的位置。Row 用 verticalAlignment，Column 用 horizontalAlignment。
• Arrangement（排列）：多个子元素之间的分布方式。Row 用 horizontalArrangement，Column 用 verticalArrangement。

记法：对齐管「在哪」，排列管「怎么分布」。

小结

Column 竖排、Row 横排、Box 叠放，这三个是 Compose 布局的全部基础。用 Arrangement 控制子元素分布，用 Alignment 控制对齐位置，用 weight 按比例分空间。Modifier 链式调用调整尺寸和样式，顺序敏感。下一节我们学习怎么用 Compose 做列表。