Compose中Column内第二个Spacer不显示问题求助

原因分析 #

你的父级Column设置了.size(400.dp)，这意味着它的高度被固定为400dp。而第一个Spacer的尺寸也是400dp，刚好占满了Column的全部高度。Column默认会在有限的空间内依次排列子元素，后面的三个Spacer因为没有剩余空间，被挤出了父容器的可视区域，所以无法显示。

通过onGloballyPositioned()检测到后三个Spacer的位置为(0.0, 400.0)，也验证了这一点——它们的顶部刚好对齐父Column的底部，完全在可视范围之外。

当给Column添加.verticalScroll(rememberScrollState())后，Column的高度不再受固定尺寸限制，而是根据内容自适应，同时允许滚动查看超出初始可视区域的内容，所以所有Spacer都能正常显示。

解决办法 #

方法1：移除父Column的固定尺寸限制 #

如果不需要父容器固定400dp高度，直接去掉.size(400.dp)，让Column根据子元素高度自适应：

Column(modifier = Modifier
    .offset(y = (-100).dp)
) {
    Spacer(modifier = Modifier
        .size(400.dp)
        .background(Color.Gray))
    Spacer(modifier = Modifier
        .size(400.dp)
        .background(Color.LightGray)
    )
    Spacer(modifier = Modifier
        .size(400.dp)
        .background(Color.DarkGray))

    Spacer(modifier = Modifier
        .size(400.dp)
        .background(Color.Black))
}

方法2：保留固定尺寸并添加垂直滚动（已验证有效） #

继续使用固定尺寸，同时保留滚动修饰符，这样既限制父容器大小，又能通过滚动查看所有子元素：

Column(modifier = Modifier
    .size(400.dp)
    .offset(y = (-100).dp)
    .verticalScroll(rememberScrollState())
) {
    Spacer(modifier = Modifier
        .size(400.dp)
        .background(Color.Gray))
    Spacer(modifier = Modifier
        .size(400.dp)
        .background(Color.LightGray)
    )
    Spacer(modifier = Modifier
        .size(400.dp)
        .background(Color.DarkGray))

    Spacer(modifier = Modifier
        .size(400.dp)
        .background(Color.Black))
}

方法3：调整子元素尺寸适配父容器 #

如果不需要每个Spacer都占400dp，可以用weight让它们均分父容器高度：

Column(modifier = Modifier
    .size(400.dp)
    .offset(y = (-100).dp)
) {
    Spacer(modifier = Modifier
        .weight(1f)
        .fillMaxWidth()
        .background(Color.Gray))
    Spacer(modifier = Modifier
        .weight(1f)
        .fillMaxWidth()
        .background(Color.LightGray)
    )
    Spacer(modifier = Modifier
        .weight(1f)
        .fillMaxWidth()
        .background(Color.DarkGray))

    Spacer(modifier = Modifier
        .weight(1f)
        .fillMaxWidth()
        .background(Color.Black))
}

内容的提问来源于stack exchange，提问作者oi io