Jetpack Compose中Column堆叠问题：非ConstraintLayout下height失效原因

架构老林

2026-7-30

为什么Jetpack Compose中直接放置的Column设置height后仍会占满全屏并覆盖？

你遇到的问题核心在于Compose根布局的默认排列规则，以及布局容器的作用差异：

1. 无父容器时的组件行为

当你直接在@Composable函数中放置多个独立的Column（没有任何父布局包裹），这些组件会被Compose的根布局（比如Android端的ComposeView）视为同级子元素。根布局的默认行为是：

采用重叠排列（类似Android原生的FrameLayout），后面的组件会覆盖前面的；
强制子元素填充可用的全部空间，这会导致你设置的height(100.dp)被忽略，因为根布局的测量约束优先级更高。

2. ConstraintLayout的作用

示例一中的ConstraintLayout是一个专门的布局容器，它的核心是通过约束规则来管理子组件的位置和尺寸：

它会尊重子组件设置的height、width等尺寸修饰符；
你通过constrainAs定义的约束（比如top链接到guideline）会明确子组件的位置，不会让它们随意填充父容器或重叠。

3. 解决方法

要让两个Column按预期排列且尺寸生效，只需要用一个布局容器包裹它们，根据需求选择排列方式：

垂直排列（最常用）

用父Column包裹，让子Column垂直排列：

Column(modifier = Modifier.fillMaxSize()) {
    Column (modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .background(colorResource(id = R.color.lighter_grey))
    ) {
    }

    Column(modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .background(colorResource(id = R.color.teal_200))
    ) {
    }
}