Hello! How can I make the content of `LazyVerticalGrid` be in the `CenterEnd` of the cell? I tried t...

# compose

[Zhang Zihan]

Hello! How can I make the content of LazyVerticalGrid be in the CenterEnd of the cell?
I tried the following code, but it doesn't work, the label is always at the top of the cell

@Composable
fun LazyVerticalGrid2Columns(value: List<Pair<String, @Composable () -> Unit>>) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalArrangement = Arrangement.Center,
    ) {
        value.forEach { (label, widget) ->
            item { Box(Modifier.fillMaxSize(), contentAlignment = Alignment.CenterEnd) { Text(label) } }
            item { Box(Modifier.fillMaxSize(), contentAlignment = Alignment.CenterStart) { widget() } }
        }
    }
}

[Stylianos Gakis]

Not sure what you want to achieve vs what you are actually seeing

[Zhang Zihan]

@Stylianos Gakis I want to see the text inside the left and right cells aligned by the center line, as shown in the image below

[Stylianos Gakis]

If you put a Modifier.border(1.dp, Color.Red) around each text composable, what are their bounds?
With that you may be able to tell if the items are centered properly but then some spacings in the font is what makes them look crooked.
Also what is widget() versus just Text(label)? Does widget do something special?

[Zhang Zihan]

@Stylianos Gakis It looks like this. fillMaxSize() doesn't seem to work.
In this case widget() is a Text(), I expect it could be any Compose function, like Image, Button, Card

[Stylianos Gakis]

If I am already in the thread there's no need to ping me again, I do see the replies anyway.

Indeed it does not seem to let you fill the max size that is given to you by the lazy grid item slot. That's because inside the grid, the item receives max height constraints as infinite, since the lazy layout allows it to grow infinitely vertically.
I am in fact not sure of the right way to make this work with a lazy grid. If someone else does that would be nice.

I would suggest you try perhaps to do something like this instead:

LazyColumn {
 item {
  FullHorizontalItem("label1", "abc")
 }
}

fun FullHorizontalItem() {
 Row {
  Text(weight(1f))
  Text(weight(1f))
 }
}

so have each lazy item contain both the left and the right side, and align them inside one single composable instead.

That's what I'd try at least.

[Zhang Zihan]

This is exactly what I did before. I tried using LazyVerticalGrid to get better performance, but it seems a bit too limited at the moment 😢

[Stylianos Gakis]

I wouldn't be concerned with performance between these two options tbh. They are both using lazy layouts, so just do what makes it actually work for you I'd say.

[Zach Klippenstein (he/him) [MOD]]

In the future, please keep long code snippets to the thread, thanks!