如何在 Constraint Layout Compose 中使用 bias

Question

如何在约束布局中的可组合项上设置 layout_constraintHorizontal_bias 属性？这是 XML 代码：

<TextView
    ...
    tool:layout_constraintStart_toStartOf="parent"
    tool:layout_constraintEnd_toEndOf="parent"
    tool:layout_constraintWidth_max="wrap"
    tool:layout_constraintHorizontal_bias="0"/>

这是我的 Jetpack Compose 代码现在的样子：

ConstraintLayout(modifier = modifier.fillMaxSize()) {
    val (button1, button2) = createRefs()
    Button(
        onClick = {},
        modifier = Modifier.constrainAs(button1) {
            top.linkTo(parent.top, margin = 16.dp)
        }
    ) {
        Text(text = "Button 1")
    }

    Button(
        onClick = {},
        modifier = Modifier.constrainAs(button2) {
            top.linkTo(button1.bottom, margin = 4.dp)
            start.linkTo(button1.end, margin = 20.dp)
            end.linkTo(parent.end, margin = 20.dp)
            width = Dimension.preferredWrapContent
        }
    ) {
        Text(text = "Button 2")
    }
}

所以我的问题是如何将 Button 2 的水平偏差设置为 0？

Answer 1

我猜 Jetpack Compose 中的 ConstraintLayout 还不能与 xml 相提并论，并且完全没有偏见。不过我找到了一个解决方法——你可以创建一个链，而链实际上支持偏差（谈到版本 1.0.0-alpha04）。

对于您的示例，像这样的事情应该可以解决问题：

ConstraintLayout(modifier = modifier.fillMaxSize()) {
    // ...

    createHorizontalChain(button2, chainStyle = ChainStyle.Packed(0F))
}

Answer 2

您必须使用 ConstrainScope 的 linkTo 函数，它具有更多参数：

ConstraintLayout(modifier = modifier.fillMaxSize()) {
    val (button1, button2) = createRefs()
    Button(
        onClick = {},
        modifier = Modifier.constrainAs(button1) {
            top.linkTo(parent.top, margin = 16.dp)
        }
    ) {
        Text(text = "Button 1")
    }

    Button(
        onClick = {},
        modifier = Modifier.constrainAs(button2) {              
            top.linkTo(button1.bottom, margin = 4.dp)
            linkTo(button1.end, parent.end, startMargin = 20.dp, endMargin = 20.dp, bias = 0F)
            width = Dimension.preferredWrapContent
        }
    ) {
        Text(text = "Button 2")
    }
}

Answer 3

除了到目前为止所写的内容之外，如果您需要垂直偏差，那么您需要使用允许为其指定分数的准则，然后 link 您的项目要准则；像这样将 button1 定位在顶部下方 70% 处：

    ConstraintLayout(modifier = modifier.fillMaxSize()) {
    val (button1, button2) = createRefs()
    val topGuideline  = createGuidelineFromTop(0.7f)

    Button(
        onClick = {},
        modifier = Modifier.constrainAs(button1) {
            top.linkTo(topGuideline.top, margin = 0.dp)
        }
    ) {
        Text(text = "Button 1")
    }

    Button(
        onClick = {},
        modifier = Modifier.constrainAs(button2) {
            top.linkTo(button1.bottom, margin = 4.dp)
            start.linkTo(button1.end, margin = 20.dp)
            end.linkTo(parent.end, margin = 20.dp)
            width = Dimension.preferredWrapContent
        }
    ) {
        Text(text = "Button 2")
    }
}

如何在 Constraint Layout Compose 中使用 bias

How to use bias in Constraint Layout Compose

android

android-jetpack-compose