Jetpack Compose布局问题：Image优先占空间，Spacer取剩余区域

直接调整布局的权重设置就能实现你的需求，核心是给Spacer加上fill = false的权重参数，让它只在Image达到最大高度后才占据剩余空间：

// 定义图片最大高度常量，替换成你的实际值
val IMAGE_MAX_HEIGHT = 400.dp

Column(
    modifier = Modifier.fillMaxSize(),
) {
    Text(text = "Title")

    Image(
        painter = painterResource(id = R.drawable.your_image), // 替换成你的图片资源
        contentDescription = "Image content",
        modifier = Modifier
            .fillMaxWidth()
            .weight(1f) // 优先占据Title和Button之间的剩余空间
            .heightIn(max = IMAGE_MAX_HEIGHT), // 限制图片最大高度
        contentScale = ContentScale.Fit // 根据需求设置图片缩放模式
    )

    // 仅当Image达到最大高度后，才会填充剩余屏幕空间
    Spacer(
        modifier = Modifier
            .weight(1f, fill = false) // fill=false 表示不强制占满权重分配的空间，只取剩余可用空间
    )

    Button(onClick = { }) {
        Text(text = "Action")
    }
}

原理说明 #

• Image设置weight(1f)，会优先获取Title和Button之间的所有可用空间，但heightIn(max = IMAGE_MAX_HEIGHT)会限制它的高度不超过最大值。
• Spacer设置weight(1f, fill = false)，当Image还没达到最大高度时，它分配到的权重空间已被Image占满，自身高度为0，不会显示；当Image达到最大高度后，剩余空间会被这个Spacer自动填充。
• Button始终固定在屏幕底部，不受上方布局影响。

内容的提问来源于stack exchange，提问作者Andrew Kolubov