How can I align elements in a row, such that one element is centered and the other is attached to the right? The following solutions do not work:

Row(horizontalArrangement = Arrangement.Center) {
            Text("Center")
            Text("Right", modifier = Modifier.fillMaxWidth().wrapContentWidth(Alignment.End))
        }

Row(horizontalArrangement = Arrangement.Center) {
            Text("Center")
            Spacer(modifier = Modifier.weight(1f))
            Text("Right")
        }

As in both cases the

Center

element will get attached to the left. The desired behavior is in this image:

perhaps use the Compose implementation of

ConstraintLayout

I was hoping there was something simpler

I cannot rule out a way of doing this with

Row

, but your results are what I would expect from your code. In both cases, you are saying "I want the content to completely fill the row" via your whitespace rules. So, if the content fills the row,

"Center"

will be on the left (in LTR, anyway). The

Arrangement.Center

will be honored, more or less, but on the whole row content... and since that fills the row, it has no real effect.

yes I understand why those solutions don't work

FWIW, the

ConstraintLayout

option would look like:

ConstraintLayout(Modifier.fillMaxWidth()) {
    val (center, right) = createRefs()

    Text("Center", modifier = Modifier.constrainAs(center) {
      centerTo(parent)
    })
    Text("Right", modifier = Modifier.constrainAs(right) {
      end.linkTo(parent.end)
    })
  }

That is a lot simpler than I remembered, maybe I should do that instead, thank you

the DSL-based approach is fairly new

Also if you'd still like to do it in a row, this'll get you there:

Row {
    Spacer(Modifier.weight(1f))
    Text("Hello")
    Text("World", Modifier.weight(1f).wrapContentWidth(Alignment.End))
}