In previous post, we discussed the mental model of multiple LayoutModifiers. Now let’s talk about the mental model of the combination of LayoutModifier and DrawModifier.
First of all, we need to know that everything on screen is drawn using some DrawModifier: Text, Image, Background, etc.
Let me give you the mental model directly.
Given the following code: Modifier.drawModifier1().drawModifier2().drawModifier3().layoutModifier1() .drawModifier4().drawModifier5().layoutModifier2() .drawModifier6().layoutModifier3()
The model is:
Notice that the modifiers are always attached to its nearest LayoutModifier on the right.
When we have multiple LayoutModifiers, how do we think about them?
In this post, I will introduce a useful mental model.
First we need to understand that LayoutModifier determines size and position of a component.
The model is simple, let’s say we have the following code:
Text( text = "Hello", modifier = Modifier .padding(20.dp) .background(Color.Green) // ignore this for now, only for understanding purpose .size(50.dp) ) We can think of this as:
LayoutModifier is a very important type of Modifier in Compose. It can decorate its component’s layout. So let’s get an idea of what this means by implementing padding using it.
Let’s try to add a 10dp padding around a Text.
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { LayoutModifierPadding() } } } @Composable fun LayoutModifierPadding() { Box( modifier = Modifier .size(100.dp) .background(Color.LightGray) ) { Text( "Hello!
Let’s see an example of how to use LookAheadLayout to implement shared view transition animation.
Here is the code:
@Composable fun Avatar(modifier: Modifier = Modifier) { Box( modifier = modifier .size(100.dp) .background(Color.Green) ) } @OptIn(ExperimentalComposeUiApi::class) @Composable fun CustomLookAheadLayout3() { var flag by remember { mutableStateOf(false) } var lookaheadOffset by remember { mutableStateOf(Offset.Zero) } val lookaheadOffsetAnim by animateOffsetAsState( targetValue = lookaheadOffset, animationSpec = TweenSpec(durationMillis = 500), label = "" ) val sharedView = remember { movableContentOf { Avatar( modifier = Modifier .
Let’s see an example of how to do custom layout in compose using Layout().
@Composable fun CustomLayout(modifier: Modifier = Modifier, content: @Composable () -> Unit) { Layout(modifier = modifier, content = content) { measurables, constraints -> var width = 0 var height = 0 val offset = 10.dp.toPx().roundToInt() val placeables = measurables.map { measurable -> measurable.measure(constraints).also { placeable -> width = max(placeable.width, width) height += placeable.height } } layout(width = width + offset * placeables.
