具有 2 个权重 (1f) 元素的位置布局

Question

这是我的简化布局：

Column(
    modifier = Modifier.fillMaxSize(),
) {
    Text(
        text = "Title",
    )
    Image(
        modifier = Modifier
            .fillMaxWidth()
            .weight(1f, fill = false)
            .heightIn(max = IMAGE_MAX_HEIGHT),
    )
    Spacer(modifier = Modifier.weight(1f))
    Button(
        onClick = { },
    ) {
        Text(text = "Action",)
    }
}

目标是让图像占据所有位置，但不能超过特定尺寸。同时我想在屏幕底部有按钮。在提供的示例中，Spacer 和 Image 将占用相同的空间，但我希望权重（1f）完全应用于图像，并且仅在应用 Spacer 后才应用于屏幕的其余部分。

意思是，对于小型设备，图像可能小于 IMAGE_MAX_HEIGHT，并且根本没有 Spacer。但对于大设备，图像采用 IMAGE_MAX_HEIGHT，其余部分用于 Spacer。

Answer 1

有复杂的选项（如 ConstraintLayout）。但这对我有用：

Column(
    modifier = Modifier.fillMaxSize(),
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .weight(1f),
    ) {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f, fill = false)
                .heightIn(max = IMAGE_MAX_HEIGHT),
            ...
        )
    }
    Button(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = Spacings.Two),
    ) {
        ...
    }
}