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

Liangjun Sha

2021-07-01

1858

当图像的宽度/高度为 4/3 时，我想将图像的开始限制为父的开始，从上到下，从头到尾，就像 Android Xml 中的 app:layout_constraintDimensionRatio="H,3:4" 一样。

下面是我的代码：

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

Is there something like ConstraintLayout's "dimensionRatio" property in Jetpack Compose?

原文答案

答案:

Rafiul

2021-07-01 8 原文

您可以在 jetpack compose 中使用 aspectRatio 修饰符。

modifier = Modifier.aspectRatio(0.75f)

它需要两个参数，第一个是表示该纵横比的单个浮点值。比如如果你想使用 3:4，你必须输入 3/4f 或 3/4 = .75f。

第二个是可选的，默认情况下它是假的。如果您发送 true，它将首先考虑 Constraints.maxHeight。

matchHeightConstraintsFirst: Boolean = false

Gabriele Mariotti

2021-07-01 4 原文

您可以使用 [aspectRatio](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier) .aspectRatio(kotlin.Float,kotlin.Boolean)) 修饰符：

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

Scott Cooper

2022-01-21 2 原文

使用 Modifier.aspectRatio 的问题在于，使用其他约束似乎没有考虑到它。纵横比实际上由约束layout本身支持

以此布局为例，我们将一个维度限制为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
        }
    )
}

那给了我们这个

[ enter image description here ]（https://i.stack.imgur.com/tdn9g.png）

如果我们然后更改指南的偏移以降低可用高度，我们最终会这样

val guidelineBottom = createGuidelineFromBottom(0.9f)

[ enter image description here ]（https://i.stack.imgur.com/8zf2k.png）

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

答案:

相关问题

标签