行内的 fillMaxHeight()

如何解决行内的 fillMaxHeight()

我的问题与此有关：How to achieve this layout in Jetpack Compose

@Composable
fun TestUi() {
    Row {
        Box(
            contentAlignment = Alignment.Center,modifier = Modifier
                .background(color = Color.Yellow)
                .fillMaxHeight()
        ) {
            CircularProgressIndicator()
        }
    
        Image(imageVector = vectorResource(id = R.drawable.ic_launcher_background))
    }
}

我希望得到这个：

但我得到了这个：

如何在不影响行高度的情况下让 Box 填充所有可用高度？

我知道我可以使用 ConstraintLayout 来解决这个问题，但对于这样一个简单的用例来说似乎太过分了。

解决方法

看看布局可组合或修饰符。您可以先测量定义元素，然后为从属元素提供修改后的约束。如果您想将其用作修饰符，您应该为列表添加大小检查。

Layout(content = {
    Box(modifier = Modifier
        .size(width = 30.dp,height = 50.dp)
        .background(Color.Green))
    Box(
        contentAlignment = Alignment.Center,modifier = Modifier
            .background(color = Color.Yellow)
            .fillMaxHeight()
    ) {
        CircularProgressIndicator()
    }
}) { measurables: List<Measurable>,constraints: Constraints ->
    val heightDef = measurables[0].measure(constraints)
    val other = measurables[1].measure(
        constraints.copy(
            maxHeight = heightDef.height,maxWidth = constraints.maxWidth - heightDef.width)
    )
    layout(
        width = heightDef.width + other.width,height = heightDef.height
    ) {
        other.placeRelative(0,0)
        heightDef.placeRelative(other.width,0)
    }
}

对于高度，而不是fillMaxHeight，只需输入

.height(vectorResource(id = R.drawable.ic_launcher_background).defaultHeight)

仅供参考，以下是使用 ConstraintLayout 实现的等效设计：

@Composable
fun TestUi() {
    ConstraintLayout {
        val (box,image) = createRefs()

        Box(
            contentAlignment = Alignment.Center,modifier = Modifier
                .background(color = Color.Yellow)
                .constrainAs(box) {
                    height = Dimension.fillToConstraints
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                }
        ) {
            CircularProgressIndicator()
        }

        Image(
            imageVector = vectorResource(id = R.drawable.ic_launcher_background),modifier = Modifier.constrainAs(image) {
                top.linkTo(parent.top)
                start.linkTo(box.end)
            }
        )
    }
}

你可以使用constraintlayout，技巧就在这部分代码height =Dimension.fillToConstraints

  ConstraintLayout(){
        val (boxRef,imgRef) = createRefs()

        Box(
            contentAlignment = Alignment.Center,modifier = Modifier
                .background(color = Color.Yellow)
                .constrainAs(boxRef){
                    start.linkTo(parent.start)
                    end.linkTo(imgRef.start)
                    top.linkTo(parent.top)
                    height = Dimension.fillToConstraints
                }

        ) {
            CircularProgressIndicator()
        }

        Image(imageVector = vectorResource(id = R.drawable.ic_launcher_background),modifier=Modifier.constrainAs(imgRef){
            start.linkTo(boxRef.end)
            top.linkTo(parent.top)
            end.linkTo(parent.end)
        })
    }