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.

CodePudding user response：

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

CodePudding user response：

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.