https://kotlinlang.org logo
#compose
Title
# compose
a

Archie

09/14/2020, 4:32 PM
Hi, I was wondering if anyone understands how
Crossfade
composable work? How does it it able to fade in and fade out the Composables? Why are there two
Stack
inside
Crossfade
? What exactly does
invalidate
do? and so on and so forth.. I would like to create a custom transition of my own but i struggle to understand how it works. Any guide on where I should start so I could understand these concepts better?
z

Zach Klippenstein (he/him) [MOD]

09/14/2020, 4:34 PM
invalidate
is just a function that manually triggers recomposition. Normally, recomposition is triggered automatically when you change the value in a
State
object. However, if you’ve factored your state out into non-Composable code and need to trigger recomposition from outside a Composable function, you can use
invalidate
.
The first stack,
Copy code
Stack(Modifier.drawOpacity(opacity.value)) {
    children()
}
Is just there to apply the opacity to the
children()
composable. It could theoretically be any layout composable. Normally
children()
will include its own top-level layout, which the caller can choose to be appropriate for itself, but compose doesn’t require a composable to specify a layout. In the case where
children()
doesn’t define its own layout, this will be used instead.
Stack
or
Column
are probably the most reasonable defaults.
The second stack is what is used to actually draw the two crossfading composables on top of each other.
Then the basic way it works is: 1. Create a list of all the children/composables that are currently visible. Usually this list will only contain a single item, but it will contain more than one during an actual transition. 2. For each child, figure out how to change its appearance. Crossfade does this by simply drawing it with a varying opacity, but you could apply virtually any transformation here by using different modifiers. Associate the child with a composable function that wraps the original child with the modifier applied (this is the first stack). 3. On every composition, loop through all the visible children and call their wrapped composable functions. When a new child (key) is detected, it gets added to the list in 1. When a transition is finished, it gets removed from the list. 3 uses the
key
function to ensure that, even if the order of the children in the list changes, the child's state is preserved. This is required because composable "identity" is based on the order of execution - so it the list changes, and the last item is now the first, it would be invoked in a different position than before which means that, by default, compose would treat it as a completely new composable (losing any internal state that it had been keeping). Using the
key
function, tells compose that the child just moved instead.
💯 4
🔝 1
☝️ 3
a

Archie

09/15/2020, 12:56 PM
Thank you very much
13 Views