行中 child 的填充高度

Question

我尝试实现这种布局，但真的不知道怎么做：

目前看起来像这样：

使用此代码：

@Preview(widthDp = 150)
@Composable
fun Item() {
    Card(shape = RoundedCornerShape(8.dp)) {
        Row {
            Box(Modifier.background(Color.Yellow).weight(1f)) {
                SomeMoreContentWithUnknownHeight()
            }
            Box(Modifier.width(20.dp).height(IntrinsicSize.Max).background(Color.Green))
        }
    }
}

我尝试将第二个 Box 的高度设置为 IntrinsicSize.Max，但这并没有改变任何东西。我目前运行 Jetpack Compose 版本 1.0.0-beta07

Answer 1

您必须将 Modifier.height(IntrinsicSize.Min) 应用到您的 Row 并将 .fillMaxHeight() 应用到第二个 Box。

类似于：

Card(shape = RoundedCornerShape(8.dp)) {
    Row(Modifier.height(IntrinsicSize.Min)) {
        Box(Modifier
            .background(Color.Yellow)
            .weight(1f)
            ) {
               //Box(Modifier.height(50.dp))
        }
        Box(Modifier.width(20.dp)
            .fillMaxHeight()
            .background(Color.Green)
            ){
            //........
        }
    }
}

行中 child 的填充高度

Fill height for child in Row

android

android-jetpack-compose