如何在 Jetpack Compose 中对齐来自不同行的两个文本

Question

I have 3 texts in one row and then another three in another row inside a LazyColumn

I want to align the "text" in the center of the first row with "15.025" value in the second row

I've used

TextAlign.Center

on both of the Texts and

             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically

set this on the Row but it doesn't work. Any tips please?

I'm pretty new in Compose, sorry for the basic question.

Answer 1

You can use Modifier.weight to make the width of "left view" equals to the width of "right view". It will make the middle text on each row always center.

Row(Modifier.fillMaxWidth()) {
    Text(
        text = "Start",
        modifier = Modifier.weight(1f)
    )
    Text(
        text = "Center",
        textAlign = TextAlign.Center, // you can also fixed the width of center text
    )
    Text(
        text = "End",
        modifier = Modifier.weight(1f),
        textAlign = TextAlign.End
    )
}

If your text content is always short, you can also use Box to make the middle text always center.

Box(Modifier.fillMaxWidth()) {
    Text(text = "Start", modifier = Modifier.align(Alignment.CenterStart))
    Text(text = "Center", modifier = Modifier.align(Alignment.Center))
    Text(text = "End", modifier = Modifier.align(Alignment.CenterEnd))
}

Answer 2

This is what I wanted to achieve and with the help of @Linh I did

Here's how I did it.

Column(Modifier.fillMaxSize()) {
    Row(Modifier.fillMaxWidth()) {
        Text(
            text = "Start",
            modifier = Modifier.weight(1.5f),
            textAlign = TextAlign.Start
        )
        Text(
            text = "Center",
            modifier = Modifier.weight(1f),
            textAlign = TextAlign.Start
        )
        Text(
            text = "End",
            modifier = Modifier.weight(1f),
            textAlign = TextAlign.End
        )
    }
}

Thanks again for the help.