Archie
09/14/2020, 4:32 PMCrossfade
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?Zach Klippenstein (he/him) [MOD]
09/14/2020, 4:34 PMinvalidate
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
.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.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.Archie
09/15/2020, 12:56 PM