The rationale that Text element with very long text overflows and pushes out sibling elements?

Question

I found a problem described here, but didn't understand the reason for "By default Text has a higher layout priority than Icon in order to fill the necessary space". This is very confusing and I want to understand it better. Also fixing this behavior using weight modifier for Text item seems very unintuitive for me (the attribute layout_constraintEnd_toStartOf in ConstraintLayout is better for understanding).

So the question is what is the rationale for default behavior that "Text has a higher layout priority than Icon in order to fill the necessary space"? And is there any intuitive way to understand why is it solved by using weight?

Answer 1

There is no priority over any Composable over another in Jetpack Compose when measuring inside a Layout. Layout composable is basis for Column, Row and Box.

To determine measurements of a composable in a Layout

measurable.measure(constraints) is used to determine in which range(min-max) a Composable should be measured, depending on this range and content of Composable it can have width in this range.

Constraints is a class that determines in which range a Measureable should be measured.

You can check out Constraints section of this answer to be familiar with which size Modifier returns which Constraints.

https://stackoverflow.com/a/73316247/5457853

Let's say parent returned minWidth = 0, maxWidth=1000

Row enter code heremeasures Composables without Modifier.weight() first in order they are placed.

If Text composable is in the first place, in your example it is, and its content reaches parent size and since it can be measured with the range above it can occupy all the space of parent while it reaches to Image it forces it to be measured with parent width - width of Text it become smaller until becoming 0px.

But when you add Modifier.weight() to Text, Image is measured with first and since its its content is in range between Contraints it's calculated with its own size then Text covers the remaining space since it has Modifier.weight() with fill param is true by default.