I’ve got a `Row` with `horizontalScroll`. All the ...
# compose
I’ve got a
. All the elements of the
have a
that can be of any width. I’d like to make all the elements of the Row to take up the same width as the largest element. Any tips on how to go about this? In the ConstraintLayout world something like this could be perhaps achieved with
There is a 
 modifier :
Copy code
var size by remember { mutableStateOf(IntSize.Zero) }

Box(Modifier.onGloballyPositioned { coordinates ->
    size = coordinates.size})
you can check that the size is the largest before using it on other composable
Do not use
. See this. Instead, use intrinsic measurements.
Thanks for the heads up 👍 Wondering about Intrinsic size, the example demonstrates the height scenario nicely in a row, however, I feel that having a horizontally scrollable
where the widths of the children should be matched is a bit less trivial. Not quite sure on how to go about solving this: intrinsic height in the example certainly works well, but here I don’t wish to constrain the width of the root
to any intrinsic width of the children
Oh sorry didn't notice that. In that case you can create a custom layout in which you query the intrinsic widths of all children and measure them with the largest width.
Yup, based on reading the docs that seems to be the smartest way. Looks like the measurements definitely need to be based the intrinsic width in order to be able to have an approximation of the widths before composition phase. A bit more work for later on 😅
Thanks for the help 👍
👍 1
Just curious - what is this UI for if you don't mind me asking?
This is for a customer service screen. The use case is to show different methods for contacting the CS with cards, these cards being inside a
. The layout for each card is a
with an Icon and a Text (e.g.
). The UI ends up looking a bit funny if the cards’ widths are determined only by the length of the Text and as such I was exploring different options, with a fallback being to establish a reasonable minimum width for each card. Constraining the Text width and having multiline text is not an option, as it’d just move the problem to another axis.
I see. Though you probably would want a max width on the card since the text could make that card possibly wider than the screen itself? I think also there's a modifier for setting a min and max width. sizeIn I think..
I am applying the
to the
as a fallback to be sure that nothing clips due to localisation, text sizes etc.
And due to that it’d be feasible to have all the cards with the same width, but of course that comes with the same caveats
I have a similar ask to this, but I just want to have a carousel where each card is set to the height of the tallest card. I'm still working on it (like 2 months later). I think I have to ditch Pager though.