行中子元素的填充高度

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))
        }
    }
}

我尝试将第二个框的高度设置为IntrinsicSize.Max，但没有任何变化。我目前正在运行Jetpack Compose 1.0.0-beta07版本。

- JacobZ

Answer 1

你必须对 Row 应用 Modifier.height(IntrinsicSize.Min)，并对第二个 Box 应用 fillMaxHeight() 修饰符。

就像这样：

Card(shape = RoundedCornerShape(8.dp)) {
    Row(
        modifier = Modifier.height(IntrinsicSize.Min) //Intrinsic measurement
    ) {
        Box(
            Modifier
                .background(Color.Yellow)
                .weight(1f)
        ) {
            //Box(Modifier.height(50.dp))
        }

        Box(
            Modifier
                .width(20.dp)
                .fillMaxHeight()  //<--- fill max height
                .background(Color.Green)
        ) {
            //........
        }
    }
}

如文档所述：

Row可组合的minIntrinsicHeight将是其子元素的最大minIntrinsicHeight。绿色的Box元素的minIntrinsicHeight为0，因为如果没有给出约束条件，它不占用空间；黄色的Box的minIntrinsicHeight将是给定特定宽度的内容的高度。因此，Row元素的高度约束将是黄色Box内容的最大minIntrinsicHeight。然后，绿色的Box将扩展其高度到由Row给出的高度约束。

- Gabriele Mariotti

---

你知道为什么我们需要对顶部行应用 Modifier.height(IntrinsicSize.Min) 吗？ - Ahmed Hegazy

@AhmedHegazy，这将使子元素的高度与所需的最小高度一样高。 - crjacinro

这很难理解，使用ConstraintLayout可以将height设置为Dimension.fillToConstraints（在View System中只需将height设置为0dp），并将top链接到parent.top，bottom链接到parent.bottom，逻辑容易理解。 - user924

这种情况怎么办？https://stackoverflow.com/questions/75990451/fill-height-for-child-in-row-when-one-of-them-is-constraintlayout 我无法使用ConstraintLayout使其正常工作。 - user924

基本上，将 .height（IntrinsicSize.Min） 设置为容器会破坏此容器内任何 ConstraintLayout 的逻辑... - user924