5
Compose Modi
fi
ers
deep dive
Android Dev Summit LT
(@mr_mkeeda)
IUUQTZPVUVCF#K(93GU9T6
Slide 2
Slide 2 text
Modi
fi
er
Modi
fi
er API
Modi
fi
er ( Compose
1
.
2
) ⭐
Recompose
Modi
fi
er (Compose
1
.
3
) ⭐
(Memory Allocation )
compose
UI
2
Slide 3
Slide 3 text
Modi
fi
er
3
@Composable
fun Screen() {
val modifier = Modifier
.padding(10.dp)
.background(Color.Blue)
.clickable { }
Row {
Text("Hello", modifier)
Text("World", modifier)
}
}
API
Slide 4
Slide 4 text
Modi
fi
er
4
Text
Text(
text = "Hello",
modifier = Modifier
.padding(10.dp)
.background(Color.Blue)
.clickable { }
)
padding
background
clickable
Slide 5
Slide 5 text
Modi
fi
er
5
Layout
Text(
text = "Hello",
modifier = Modifier
.padding(10.dp)
.background(Color.Blue)
.clickable { }
)
padding
background
clickable
Hello
Modi
fi
er.Element
LayoutNode
(ComposeNode)
Modi
fi
er.Element
Slide 6
Slide 6 text
Stateful Modi
fi
er
6
Layout
padding
background
Hello
Clickable
State
clickable
Recompose Modi
fi
er
Modi
fi
er
fun Composer.materialize(modifier: Modifier): Modifier
fun Modifier.composed(
/*…*/
factory: @Composable Modifier.() -> Modifier
): Modifier
Slide 7
Slide 7 text
Modi
fi
er.composed Element
7
padding
background
Layout
Hello
pointerInput
semantics
Clickable (
1 6
Elements)
IUUQTZPVUVCF#K(93GU9T6 U
Slide 8
Slide 8 text
Modi
fi
er
8
padding
background
Layout
Hello
pointerInput
semantics
Entity
Entity
Entity
Entity
Entity Modi
fi
er.Element
Modi
fi
er.Element
Entity
Slide 9
Slide 9 text
Recompose
9
padding
Layout
padding
background
Hello
Clickable
State
Slide 10
Slide 10 text
Recompose
10
Recompose
Modi
fi
er
Clickable
padding
background
Layout
Hello
pointerInput
semantics
Clickable
Modi
fi
er.Node
14
Modi
fi
er.Node
LayoutNode
composed/materialize
Composition Modi
fi
er
Stateful State Node
padding
background
clickable
Layout
Hello
PaddingNode
BackgroundNode
ClickableNode
State