How to make a lazy grid with 1 column with items t...

# compose

[Adrien de Sentenac]

How to make a lazy grid with 1 column with items that match the width of the biggest one?

[Adrien de Sentenac]

I have a grid with 3 columns: the first one has a fixed width, the third shows buttons with different possible texts (and should all have the width of the button with the longest text) and the third one takes the remaining space.

I've currently implemented it by copying FixedLazyGrid to be able to set the width/weight of the column, and I'm using onGloballyPositioned on my third column items to get the biggest width for that column and setting that as the min width for my buttons.
It works but I'm not sure if it's the best solution? Another options I thought of is to compute the biggest width for my buttons since I know the possible text values, but I didn't find an API to get the width in pixel (or dp) that a given string would take for a given font.
Maybe another solution would be to create a custom layout, but I'm not too sure how that works with lazy loading.
Did I miss another possible solution?

[adjpd]

Have you looked at Intrinsics?

[Adrien de Sentenac]

I have implemented the same UI with a non-lazy grid that uses intrinsics to do that, but I don't see how to use them with lazy items. Since the lazy grid isn't really a grid, it's a list of rows with 3 items each. So each item that part of a "column" doesn't know about the other items that will be visually in the same column.

[mattinger]

@Adrien de Sentenac LazyVerticalGrid isn't always a column of rows. That's only if you Gridcells.Fixed set. If you use GridCells.Adaptive it's a custom layout arrangement (which i admit i haven't looked at what it's doing).

[Adrien de Sentenac]

Adaptive uses a FixedLazyGrid under the hood:

is GridCells.Adaptive ->
            BoxWithConstraints(
                modifier = modifier
            ) {
                val nColumns = maxOf((maxWidth / cells.minSize).toInt(), 1)
                FixedLazyGrid(
                    nColumns = nColumns,
                    state = state,
                    contentPadding = contentPadding,
                    scope = scope
                )
            }

[Adrien de Sentenac]

In the end I went with Intrinsics anyway, I put 2 texts in a box in my button, one with the longest text I have and with its alpha at 0, and the other with the text I want to actually display. It's a bit hackish but that works. Though if someone knows a way to measure a Text width without actually having to add it to the Compose tree, I'm interested.