Compose 中最常用的布局** —— Box / Row / Column / ConstraintLayout教程

1️⃣ Box --- 相当于 FrameLayout

特点：

子元素叠加显示
可以通过 .align() 指定子元素在 Box 中的位置
通常用于：背景 + 前景叠加、一个容器包裹元素居中显示等

语法示例：

kotlin 复制代码

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.LightGray)
    ) {
        Text(
            "左上角",
            modifier = Modifier.align(Alignment.TopStart)
        )
        Text(
            "右下角",
            modifier = Modifier.align(Alignment.BottomEnd)
        )
        Box(
            modifier = Modifier
                .size(50.dp)
                .background(Color.Red)
                .align(Alignment.Center)
        )
    }
}

✅ 总结：

Box 内元素可以重叠
位置灵活，可用 Alignment 定位

2️⃣ Row --- 横向排布，相当于横向 LinearLayout

特点：

水平方向依次排列子元素
可以通过 horizontalArrangement 控制间距
可以用 weight 平分空间

示例：

kotlin 复制代码

@Composable
fun RowExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text("左")
        Text("中")
        Text("右")
    }
}

带权重示例：

kotlin 复制代码

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))
}

✅ 总结：

水平排列
支持 weight 平分或按比例分配空间

3️⃣ Column --- 纵向排布，相当于竖向 LinearLayout

特点：

垂直方向依次排列子元素
可以通过 verticalArrangement 控制间距
同样支持 weight

示例：

kotlin 复制代码

@Composable
fun ColumnExample() {
    Column(
        modifier = Modifier
            .fillMaxHeight()
            .background(Color.LightGray),
        verticalArrangement = Arrangement.SpaceAround
    ) {
        Text("上")
        Text("中")
        Text("下")
    }
}

带权重示例：

kotlin 复制代码

Column(modifier = Modifier.fillMaxHeight()) {
    Box(modifier = Modifier.weight(1f).fillMaxWidth().background(Color.Red))
    Box(modifier = Modifier.weight(2f).fillMaxWidth().background(Color.Green))
}

✅ 总结：

垂直排列
支持间距和权重

4️⃣ ConstraintLayout --- 相当于 View 系统的 ConstraintLayout

特点：

可以精确控制每个子元素位置
支持链式布局（Chain）、比例、对齐等
Compose 官方提供的 ConstraintLayout API

示例：

kotlin 复制代码

@Composable
fun ConstraintLayoutExample() {
    androidx.constraintlayout.compose.ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .background(Color.LightGray)
    ) {
        val (button1, button2, text) = createRefs()

        Button(
            onClick = {},
            modifier = Modifier.constrainAs(button1) {
                start.linkTo(parent.start)
                top.linkTo(parent.top)
            }
        ) {
            Text("按钮1")
        }

        Button(
            onClick = {},
            modifier = Modifier.constrainAs(button2) {
                end.linkTo(parent.end)
                top.linkTo(parent.top)
            }
        ) {
            Text("按钮2")
        }

        Text(
            "居中显示",
            modifier = Modifier.constrainAs(text) {
                centerTo(parent)
            }
        )
    }
}

✅ 总结：

精确布局
适合复杂 UI
可以链式、居中、比例、依赖其他元素

📌 总结对比表

Compose 布局	对应 Android View	特点
Box	FrameLayout	子元素叠加，可 align
Row	LinearLayout (horizontal)	水平排列，支持 weight
Column	LinearLayout (vertical)	垂直排列，支持 weight
ConstraintLayout	ConstraintLayout	精确定位，链式布局，复杂 UI

💡 小技巧：

简单布局 → Row / Column / Box
复杂布局 → ConstraintLayout
叠加元素 → Box
权重分配 → Row / Column + weight
可组合使用 → Box + Row + Column 组合