在 android jetpack compose 中设置父项减去其他子元素可用框的最大高度

Question

我有 2 个框，其中一个的固定宽高比为 16/9，我想将第二个框设置为剩余 space 的大小。

宽高比为 16/9 的框在底部。

我希望白色部分用最大宽度和高度响应的洋红色框填充。

这是我尝试过的：

@Composable
fun HomeScreen() {
    Box {
        Surface(
            color = MaterialTheme.colorScheme.background
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Bottom
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(IntrinsicSize.Max)
                        .background(color = Color.Magenta)
                )
                Box(
                    modifier = Modifier
                        .aspectRatio(16 / 9f)
                        .background(color = Color.Red)
                )
            }
        }
    }
}

@Preview(
    showBackground = true, name = "Light mode",
    uiMode = Configuration.UI_MODE_NIGHT_NO or Configuration.UI_MODE_TYPE_NORMAL
)
@Preview(
    showBackground = true, name = "Night mode",
    uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL
)
@Composable
fun HomeScreenPreview() {
    HomeScreen()
}

Answer 1

在这种情况下，应该使用Modifier.weight：使用默认参数fill = true，它将强制视图占据其他未加权子项之后剩余的所有高度。

Box(
    modifier = Modifier
        .fillMaxWidth()
        .weight(1f)
        .background(color = Color.Magenta)
)
Box(
    modifier = Modifier
        .aspectRatio(16 / 9f)
        .background(color = Color.Red)
)

在 android jetpack compose 中设置父项减去其他子元素可用框的最大高度

Set max height for box available from parent minus other child element in android jetpack compose

user-interface

android

android-jetpack-compose