Блог

Как мне установить 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")
    }
}
  

Итак, мой вопрос в том, как мне установить горизонтальное смещение кнопки 2 равным 0?

Вы должны использовать linkTo функцию ConstrainScope , которая имеет больше параметров:

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

Я предполагаю, что ConstraintLayout в Jetpack Compose пока не соответствует xml, и смещение просто отсутствует. Однако я нашел обходной путь — вы можете создать цепочку, и цепочки действительно поддерживают смещение (говоря о версии 1.0.0-alpha04 ).

Для вашего примера что-то вроде этого должно сработать:

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

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

В дополнение к тому, что написано до сих пор, если вам нужно вместо этого вертикальное смещение, с помощью compose вам нужно использовать рекомендации, которые позволяют указать для него дробь, а затем связать ваш элемент с руководством; что-то вроде этого для позиционирования 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")
    }
}