How does the order of modification have an effect on the end result?
To know, we have to see Underneath The Hood how Compose UI is derived from Composable features.
Compose Remodel Knowledge into UI via three levels as proven beneath
Composition—What to show?: Compose The runtime goes via the Composable features, see what should be displayed, and construct a tree construction representing the consumer interface. Every node in that construction is a
Format Nodewhich accommodates info for the subsequent stage within the course of.
Format— The place to indicate?: This section takes the tree construction as enter, traverses it, traversing every node and its youngsters to measure
ycoordinates of its baby nodes and eventually its personal node in 2D Area.
Drawing— How to render?: This goes via the node-by-node tree construction and plots every node on the 2D display pixel by pixel.
Format and drawing levels
The format section determines the placement
y and dimension
peak of every format and its youngsters utilizing
Drawing Part draw format and apply
modifiers to be utilized within the Drawing section.
modifiers have an effect in
Drawing stage like
modifiers are associated to drawings and they’re relevant solely in
Drawing Part section. These modifiers are utilized within the string
Much like some
modifiers have an effect in
Format stage. All of that generally
modifiers could have an effect on the dimensions and placement of UI parts utilized in
Format stage like
requiredSize and so forth. These modifiers are utilized within the string
So to know how the total image
modifiers utilized collectively, we’ll have a look at these two levels collectively.
Earlier than persevering with, yet another level to understand that in
modifiers utilized collectively for the ultimate resolution
placement of every consumer interface component.
For instance in
Format stage every node passes it
constraints to its baby nodes limiting them from exceeding the boundary amongst them
constraints then the kid nodes determine its dimension in these nodes
constraints and go the up to date constraints to their youngsters and so forth and eventually, the dad or mum
node decides its dimension and place in spite of everything its youngsters have been determined.
Now let’s have a look at how
modifiers utilized via a diagram, We are going to take the code instance as proven above within the first instance.
The diagram beneath reveals how
modifiers is utilized.
Within the diagram, every arrow is labeled with the number one, 2, 3, and so forth. displaying the order of
Format Part: Represented with the main arrow going from
Drawing Part: Represented with the underside arrow going from
As talked about earlier than
modifiers impacts the dimensions and place of the UI component utilized from
Proper talked about within the diagram with the highest arrows going from
Proper numbered 1, 2 and three like this
modifiers impacts dimension and place.
Backside arrows 4 and 6 present
modifiers utilized in time
Drawing levels for them to be utilized from
Left talked about with backside arrows going from
Every prime arrow in
Format Phases labeled 1, 2 and three have
constraints transmitted from
Proper maintain subsequent
modifier don’t exceed the laws
constraints come from earlier than
modifier. On each step
constraints up to date by
modifiers and replace
constraints then be moved to the subsequent
modifiers and such.
See the diagram for the 2nd code instance.
Within the instance we have now swapped
padding modifiers and
border modifier so how does it have an effect on
modifiers utilized and finally the results of the consumer interface.
Within the subsequent instance we’re exchanging
dimension modified as beneath.
Let’s examine how the UI is drawn.
We are able to see the ultimate dimension of
Field accomplished to
40dp and the dimensions of the inexperienced field inside is now lowered
30dp as a result of
padding apply later