Jetpack Compose 中 Constraint Layout 的权重

Question

在 Jetpack Compose 中，是否有类似于 XML 中使用 weights 的 ConstraintLayout chains 的方法：

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/first"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:background="#caf"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/start"
        app:layout_constraintHorizontal_weight="6"/>

    <View
        android:id="@+id/second"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:background="#fac"
        app:layout_constraintLeft_toRightOf="@+id/first"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="4"/>

</android.support.constraint.ConstraintLayout>

目前，ConstraintLayoutScope和ConstraintScope均不提供权重功能。 ConstraintLayoutScope提供createHorizontalChain(vararg elements: ConstraintLayoutReference, chainStyle: ChainStyle)（或相应的createVerticalChain），但没有为单个元素设置权重的选项。

使用指南线、障碍物和其他所有集成的元素后，我感觉还缺少了一些重要的东西。是否有一种方法可以在链中使用权重或模拟它们的行为？我不能仅为一个元素指定固定宽度，因为ConstraintLayout的宽度必须匹配整个屏幕。

注意：我知道新的Jetpack Compose ConstraintLayout对于像Android View ConstraintLayout那样的复杂嵌套布局结构并没有性能优势。我也知道Row和Column提供权重功能，但在我的情况下，我必须使用ConstraintLayout（原因）

- Yannick

Answer 1

你尝试过fillMaxWidth(faction)修饰符吗？我试过了，对我有用...

@Composable
fun ConstraintLayoutWeightDemo() {
    ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
        val (refB1, refB2, refB3) = createRefs()
        Text(
            "Text 1",
            modifier = Modifier
                .constrainAs(refB1) {
                    start.linkTo(parent.start)
                    end.linkTo(refB2.start)
                }
                .fillMaxWidth(.3f) // <<<---- 30%
                .background(Color.Red)
        )
        Text(
            "Text 2",
            modifier = Modifier
                .constrainAs(refB2) {
                    start.linkTo(refB1.end)
                    end.linkTo(refB3.start)
                }
                .fillMaxWidth(.5f) // <<<---- 50%
                .background(Color.Green)
        )
        Text(
            "Text 3",
            modifier = Modifier
                .constrainAs(refB3) {
                    start.linkTo(refB2.end)
                    end.linkTo(parent.end)
                }
                .fillMaxWidth(.2f) // <<<---- 20%
                .background(Color.Blue)
        )
    }
}

- nglauber

---

运作得很好！非常感谢。注意：此修饰符将被“width = Dimension.fillToConstraints”覆盖，因此请使用它们中的任何一个。 - Yannick

可行的解决方案 ;) - InsaneCat

Answer 2

您可能想要使用 Modifier.horizontalChainWeight = 1f

- Felipe Silva Vieira

---

您的回答可以通过添加进一步的支持信息来改善。请[编辑]以添加更多细节，例如引用或文献，以便他人可以确认您的回答是正确的。您可以在帮助中心找到有关如何撰写良好回答的更多信息。 - Community

Answer 3

正如Feilipe所提到的，对于我的情况来说，horizontalChainWeight比fillMaxWidth效果更好，因为我的链是复杂的，并且包含一些具有固定宽度的组件。

   modifier = Modifier
            .height(someHeight)
            .constrainAs(component1) {
                    top.linkTo(other1.bottom)
                    start.linkTo(other2.end)
                    end.linkTo(parent.end)
                    bottom.linkTo(other3.top)
                    horizontalChainWeight = .5f  // <--- weight
              }

- Po Prostu Ra