布局

基本概念

• Column：竖直方向排列子项。常用属性：verticalArrangement（垂直排列规则）、horizontalAlignment（子项横向对齐）、以及常用的 Modifier（如 fillMaxWidth、padding、weight）。
• Row：水平方向排列子项。常用属性：horizontalArrangement（水平排列规则）、verticalAlignment（垂直对齐）、Modifier.weight 用于分配剩余空间。
• Box：在同一平面上层叠子项。常用属性：contentAlignment（默认子项对齐）、子项可使用 Modifier.align(...) 单独定位。

常用 Modifier 与助手

• Modifier.fillMaxWidth() / fillMaxHeight() / fillMaxSize()：充满父容器的尺寸。
• Modifier.weight(f)：在 Row 或 Column 内分配剩余空间（以比例 f）。
• Arrangement.spacedBy(dp)：用于 horizontalArrangement 或 verticalArrangement，在子项间添加间隔。
• Alignment.CenterVertically、Alignment.CenterHorizontally、Alignment.Center：常见对齐常量。
• Spacer(Modifier.size(x.dp))：占位控件，用于创建空白。

Column 示例

@Composable
fun ColumnExample() {
	Column(
		modifier = Modifier
			.fillMaxWidth()
			.padding(16.dp),
		verticalArrangement = Arrangement.spacedBy(8.dp),
		horizontalAlignment = Alignment.CenterHorizontally
	) {
		Text("标题", style = MaterialTheme.typography.h6)
		Text("副标题或描述")
		Row {
			Text("左边")
			Spacer(Modifier.width(8.dp))
			Text("右边")
		}
	}
}

要点：在 Column 中使用 weight 可以让子项按比例占用竖直剩余空间（例如一个可滚动区域与固定高度的表头布局）。

Row 示例

@Composable
fun RowExample() {
	Row(
		modifier = Modifier
			.fillMaxWidth()
			.padding(16.dp),
		horizontalArrangement = Arrangement.spacedBy(12.dp),
		verticalAlignment = Alignment.CenterVertically
	) {
		Box(Modifier.size(40.dp).background(Color.Gray))
		Column(Modifier.weight(1f)) {
			Text("标题")
			Text("子文本", style = MaterialTheme.typography.body2)
		}
		Text("时间", modifier = Modifier.padding(start = 8.dp))
	}
}

要点：在 Row 中 Modifier.weight(1f) 会使该子项占据剩余的水平空间；多个带 weight 的子项会按权重比例分配空间。

Box 与 BoxWithConstraints

Box 用来实现层叠效果（比如在图片上放置文字或浮动按钮）。contentAlignment 控制默认对齐，子项也可以使用 Modifier.align(Alignment.Xxx) 单独定位。

@Composable
fun BoxExample() {
	Box(
		modifier = Modifier
			.fillMaxWidth()
			.height(200.dp)
			.background(Color.LightGray),
		contentAlignment = Alignment.BottomEnd
	) {
		Image(
			painter = rememberImagePainter("https://..."),
			contentDescription = null,
			modifier = Modifier.fillMaxSize(),
			contentScale = ContentScale.Crop
		)
		Text(
			"Overlay",
			modifier = Modifier
				.padding(12.dp)
				.background(Color.Black.copy(alpha = 0.6f))
				.padding(6.dp),
			color = Color.White
		)
	}
}

BoxWithConstraints 用于在组合项内部根据父容器的最大宽高调整布局逻辑（例如不同屏幕宽度下切换布局）。

@Composable
fun ResponsiveBox() {
	BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
		if (maxWidth < 600.dp) {
			// 小屏布局
			Column { /* ... */ }
		} else {
			// 平板/大屏布局
			Row { /* ... */ }
		}
	}
}

进阶：ConstraintLayout 与自定义测量

当需要更复杂的约束（如相对定位、链式布局、基线对齐）时，可以使用 ConstraintLayout（Compose 版）。

依赖示例：

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

另外在自定义布局或性能敏感场景下，需要注意 Compose 的测量与布局流程（measure -> place），尽量使用内置布局和 Modifier 来保持简单与高性能。

小结（速查）

• Column：竖直排列，属性 verticalArrangement、horizontalAlignment、Modifier.weight
• Row：水平排列，属性 horizontalArrangement、verticalAlignment、Modifier.weight
• Box：层叠布局，contentAlignment 与 Modifier.align
• 常用工具：Spacer、Arrangement.spacedBy、BoxWithConstraints、ConstraintLayout（复杂场景）

如果你希望我把说明扩展为更完整的示例（例如包含完整的屏幕示例、主题与多种状态演示），我可以继续添加具体的可运行示例和测试代码。