Jetpack Compose 中是否有类似 ConstraintLayout 的“dimensionRatio”属性？

Question

I wanna constraint the Image's start to parent's start, top to top, end to end when its width\/height is 4\/3, just like app:layout_constraintDimensionRatio="H,3:4"<\/code> in Android Xml.


ConstraintLayout(
        modifier = Modifier
            .wrapContentHeight()
            .width(162.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(color = Color.White)
            .clickable {
                //do something
            }
    ) {
        val (coverImg, title, status, date) = createRefs()

        Image(
            "some ignored properties",
            modifier = Modifier
                .constrainAs(coverImg) {
                    linkTo(start = parent.start, end = parent.end)
                    top.linkTo(parent.top)
                    width = Dimension.fillToConstraints
                }
                .height(102.dp)//I don't want to specify its height
        )
        
        Text(...)
        AnyOtherLayout(...)
}

Answer 1

You can use aspectRatio modifier in jetpack compose.

modifier = Modifier.aspectRatio(0.75f)

It takes two parameters first one is a single float value that represents that aspect ratio. Like If you want to use 3:4 you have to input 3/4f or 3/4 = .75f.

2nd one is optional by default it's false. If you send true it will consider Constraints.maxHeight first.

matchHeightConstraintsFirst: Boolean = false

Answer 2

You can use the aspectRatio modifier:

    Image(
        painter = painterResource(id = R.drawable.xxx),
        "some ignored properties",
        contentScale = ContentScale.FillBounds,
        modifier = Modifier
            .constrainAs(coverImg) {
                linkTo(start = parent.start, end = parent.end)
                top.linkTo(parent.top)
                width = Dimension.fillToConstraints
            }
            .aspectRatio(4f/3f)
    )

Answer 3

The problem with using Modifier.aspectRatio is that it doesn't seem to be taken into account when using other constraints. Aspect ratios are actually supported by ConstraintLayout itself

Take this layout for example, we constrain one dimension as a ratio of 16:9

ConstraintLayout(modifier = Modifier.fillMaxSize()) {

    val (box) = createRefs()
    val guidelineBottom = createGuidelineFromBottom(0.1f)

    Box(modifier = Modifier
        .background(Color.Blue)
        .constrainAs(box) {
            linkTo(parent.start, parent.end, startMargin = 32.dp, endMargin = 32.dp)
            linkTo(parent.top, guidelineBottom)

            width = Dimension.ratio("16:9")
            height = Dimension.fillToConstraints
        }
    )
}

That gives us this

If we then change the offset of guidelineBottom to decrease the available height we end up with this

val guidelineBottom = createGuidelineFromBottom(0.9f)