Column：在 Compose 中垂直排列和配置容器

什么是 Jetpack Compose 中的 Column

Column — 是一个 Composable 函数，它接受可选参数：modifier、verticalArrangement、horizontalAlignment 和 content（带 ColumnScope 的 lambda）。在 Column 内部，子 Composable 函数按声明顺序从上到下排列。Column 的高度等于子元素高度的总和加上 Arrangement 指定的空间。宽度则根据子元素的最大宽度（考虑 Alignment）确定。

Column 是一个不可见的容器：默认情况下它没有自己的背景或边框。如果需要背景 — 请为 Column 本身添加 Modifier.background()。与 LazyColumn 不同，Column 同时显示所有子元素，并且不支持虚拟化。这意味着 Column 仅适用于小型数据集 — 最多 10-15 个元素。对于长列表，请使用 LazyColumn。

ColumnScope — 是 Column 的 content lambda 的接收者。它提供了仅在 Column 内部工作的额外修饰符：weight()、align()、alignByBaseline()。这些修饰符在 Column 之外没有意义，因为它们依赖于垂直排列的特性。例如，Modifier.align(Alignment.CenterHorizontally) 将子元素水平对齐到 Column 的中心。

Column 的参数：Arrangement、Alignment、Modifier

VerticalArrangement 决定了元素之间的垂直空间如何分布。可用的值：Arrangement.Top（默认）、Bottom、Center、SpaceBetween、SpaceEvenly、SpaceAround。如果 Column 的高度大于元素高度的总和，Arrangement 会分配可用空间。如果元素占据了全部高度 — Arrangement 没有影响。

HorizontalAlignment 设置每个子元素的水平对齐方式。Alignment.Start（默认，LTR）、CenterHorizontally、End。Alignment 对每个元素独立作用：如果一个元素窄而另一个宽 — 第一个将对齐，第二个可能超出 Column 的边界。Alignment 仅在 Column 具有固定宽度或 fillMaxWidth 时起作用。

Column 的 Modifier：Column 接受应用于容器本身的 Modifier。Modifier.fillMaxWidth()、fillMaxHeight()、size()、padding() — 所有标准修饰符都起作用。特点：Modifier.height(IntrinsicSize.Min) 强制 Column 根据子元素（考虑 Intrinsic measurement）计算最小高度。

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("顶部", modifier = Modifier.background(Color.Cyan))
        Text("中间", modifier = Modifier.background(Color.Magenta))
        Text("底部", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize：Column 根据内容调整高度
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("短文本")
        Text("会在列中换行的非常长的文本")
    }
}

Column weight：元素之间的空间分配

Modifier.weight() — 是一个 ColumnScope 修饰符，它根据指定的权重在 Column 元素之间按比例分配可用垂直空间。如果 Column 占据 400dp 高度，而子元素总共占据 100dp，则剩余的 300dp 在 weight 元素之间分配。weight(2f) 的元素获得的权重是 weight(1f) 元素的两倍。

fill — weight 的第二个参数：weight(weight: Float, fill: Boolean = true)。如果 fill = true（默认），元素会拉伸到整个可用高度。如果 fill = false — 元素仅占据其固有高度，剩余空间保持空白。当元素应该紧贴一侧，但 weight 仅指定空白空间的分配比例时，这很有用。

weight 的限制：weight 仅在具有固定高度或 fillMaxHeight() 的 Column 中起作用。如果 Column 的高度由子元素确定（wrap content），权重没有意义 — 没有可用空间来分配。另外，weight 不能与同一元素上的 Modifier.height() 结合使用 — 它们会冲突，weight 将被忽略。

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // 占据高度的 1/6（权重 1，总和 1+2+3=6）
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // 占据高度的 2/6
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // 占据高度的 3/6
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn：何时使用什么

Column 立即显示所有子元素。如果元素超过 10-15 个，Column 会对组合和测量造成显著负担。相反，LazyColumn 仅渲染可见元素并重用不可见元素。对于长列表、包含数千个元素的列表、无限列表或聊天 — LazyColumn 是必需的。

什么时候 Column 更好：带表单的屏幕（3-10 个字段）、个人资料卡片、带图标的垂直列、菜单。Column 还支持 IntrinsicSize，这对于自适应高度很有用。此外，Column 更容易调试 — 没有虚拟化，所有元素在 Layout Inspector 中都可见。对于静态 UI，Column 是正确选择。

LazyColumn 提供：项目缓存、基于键的标识、添加/删除动画（animateItemPlacement）、粘性标题。如果列表包含不同类型的元素（不同 viewType）— 请使用带有 sealed class 的 LazyColumn（在 items 中）。Column 不支持粘性标题（需要通过 scrollable Column 模拟）。LazyColumn 在使用 GridCells 时还支持 LazyVerticalGrid。

Column 使用的实际示例

让我们来看看用户个人资料屏幕，其中 Column 用作头像、姓名、个人简介和操作按钮的主容器。这里使用 IntrinsicSize.Min 的 Column 会根据内容进行调整，而 weight 用于在部分之间分配空间。

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // 头像
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // 姓名
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // 个人简介
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // 操作按钮
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("消息") }
                OutlinedButton(onClick = { }) { Text("关注") }
            }
        }
    }
}

在示例中，Column 使用 Arrangement.spacedBy(8.dp) 来在各个元素之间实现均匀间距。horizontalAlignment = CenterHorizontally 将头像、姓名和个人简介居中。Column 内的 Row — 是一行按钮的嵌套容器。这种 Column（垂直排列）和 Row（水平排列）的组合是 Compose 中 UI 构建的典型模式。