Composing an API the *right* way (Droidcon Berlin 2024)

Everyone who writes code using Jetpack Compose designs Composable functions and components all the time. In this talk, we’ll take a look at some highlights from the official guidelines around designing Compose APIs, to see how we can do a better job of building with Compose.

More: https://zsmb.co/talks/composing-an-api-the-right-way/

Transcript

1. Composing an API the right way Márton Braun Developer Advocate
2. API design Framework Library App
3. API design Framework Library App
4. Guidelines
5. Guidelines
6. Guidelines jb.gg/compose
7. Guidelines jb.gg/compose
8. Agenda › Naming › Parameters › Default values › Modifiers › Slots › State handling
9. Naming
10. Constants const val SOME_LOUD_CONSTANT = 999999
11. Constants const val SOME_LOUD_CONSTANT = 999999
12. Constants const val DefaultKeyName = "__defaultKey"
13. Constants const val DefaultKeyName = "__defaultKey" val StructurallyEqual: ComparisonPolicy = StructurallyEqualsImpl()
14. Constants const val DefaultKeyName = "__defaultKey" val StructurallyEqual: ComparisonPolicy = StructurallyEqualsImpl() object ReferenceEqual : ComparisonPolicy {} sealed class LoadResult<T> { object Loading : LoadResult<Nothing>() class Done<T>(val result: T) : LoadResult<T>() class Error(val cause: Throwable) : LoadResult<Nothing>() }
15. Constants const val DefaultKeyName = "__defaultKey" val StructurallyEqual: ComparisonPolicy = StructurallyEqualsImpl() object ReferenceEqual : ComparisonPolicy {} sealed class LoadResult<T> { object Loading : LoadResult<Nothing>() class Done<T>(val result: T) : LoadResult<T>() class Error(val cause: Throwable) : LoadResult<Nothing>() } enum class Status { Idle, Busy, }
16. Functions
17. Functions It depends.
18. Functions Return a value Emit content
19. Functions Return a value Emit content
20. Functions Return a value Emit content
21. Functions Return a value Emit content @Composable fun Column(...) @Composable fun LaunchedEffect(...) @Composable fun Button(...)
22. Functions Return a value @Composable fun stringResource( @StringRes id: Int ): String @Composable fun rememberScrollState( initial: Int = 0 ): ScrollState Emit content @Composable fun Column(...) @Composable fun LaunchedEffect(...) @Composable fun Button(...)
23. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme
24. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme
25. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme @Composable fun colorScheme(darkTheme: Boolean): ColorScheme
26. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme @Composable fun colorScheme(darkTheme: Boolean): ColorScheme @Composable fun rememberCoroutineScope(): CoroutineScope @Composable fun CoroutineScope(): CoroutineScope
27. Component /kəmˈpəʊnənt/ noun
28. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
29. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
30. Components @Composable fun Header() { Column { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") Row { Button { Text("Docs") } Button { Text("Blog") } } } }
31. Components @Composable fun Header() { Column { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") Row { Button { Text("Docs") } Button { Text("Blog") } } } }
32. Components @Composable fun Header() { Column { Row { Button { Text("Docs") } Button { Text("Blog") } } } } Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.")
33. Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { } Components @Composable fun Header() { Column { Row { Button { Text("Docs") } Button { Text("Blog") } } } }
34. Components Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { } @Composable fun Header() { Column { Title() Row { Button { Text("Docs") } Button { Text("Blog") } } } }
35. Components Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { } @Composable fun Header() { Column { Title() Row { Button { Text("Docs") } Button { Text("Blog") } } } }
36. Components Kotlin programming language Concise. Cross-platform. Fun. Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { }
37. Components Kotlin programming language Concise. Cross-platform. Fun. Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { Column { } }
38. Components Concise. Cross-platform. Fun. Kotlin programming language Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { Column { } }
39. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
40. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
41. Components @Composable fun InputField : { // ... } val inputState = InputField Button(onClick = { inputState.value = "" }) { Text("Clear input") } UserInputState () ()
42. Components @Composable fun InputField : { // ... } Button(onClick = { inputState.value = "" }) { Text("Clear input") } InputField UserInputState val inputState = () ()
43. Components @Composable fun InputField : UserInputState { // ... } InputField () () Button(onClick = { inputState.value = "" }) { Text("Clear input") } val inputState =
44. Components @Composable fun InputField inputState: { // ... } remember { UserInputState() } InputField inputState UserInputState val inputState = ( ) ( ) Button(onClick = { inputState.value = "" }) { Text("Clear input") }
45. Components @Composable fun InputField(inputState: UserInputState) { // ... } val inputState = remember { UserInputState() } InputField(inputState) Button(onClick = { inputState.value = "" }) { Text("Clear input") }
46. Components @Composable fun InputField(inputState: UserInputState) { // ... } val inputState = remember { UserInputState() } InputField(inputState) Button(onClick = { inputState.value = "" }) { Text("Clear input") }
47. Components @Composable fun InputField(inputState: UserInputState) { // ... } val inputState = remember { UserInputState() } Button(onClick = { inputState.value = "" }) { Text("Clear input") } InputField(inputState)
48. Components Data UI
49. Parameters
50. CompositionLocal jb.gg/composition-locals
51. CompositionLocal jb.gg/composition-locals
52. CompositionLocal jb.gg/composition-locals
53. CompositionLocal jb.gg/composition-locals
54. CompositionLocal Data Styles jb.gg/composition-locals
55. > Parameters CompositionLocal explicit implicit
56. Default arguments @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = LocalTextStyle.current, )
57. Default arguments @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = LocalTextStyle.current, )
58. @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = LocalTextStyle.current, Default arguments )
59. Default arguments @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle? = null, val actualStyle = style ?: LocalTextStyle.current // ... } ) {
60. Default arguments @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.shape, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit, )
61. Default arguments @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.shape, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit, )
62. Default arguments object ButtonDefaults { val ContentPadding: PaddingValues val MinWidth: Dp val MinHeight: Dp val IconSize: Dp val IconSpacing: Dp val shape: Shape @Composable get @Composable fun buttonElevation(...): ButtonElevation = ButtonElevation(...) } @Composable fun buttonColors(...): ButtonColors = ButtonColors(...) Button( onClick = { viewModel.savePage() }, colors = customColors ?: ButtonDefaults.buttonColors(),
63. Default arguments object ButtonDefaults { } @Composable fun buttonColors(...): ButtonColors = ButtonColors(...) Button( onClick = { viewModel.savePage() }, colors = customColors ?: ButtonDefaults.buttonColors(), ) { Text("Save") }
64. Default arguments internal object ButtonDefaults { @Composable fun buttonColors(...): ButtonColors = ButtonColors(...) } Button( onClick = { viewModel.savePage() }, colors = customColors ?: ButtonDefaults.buttonColors(), ) { Text("Save") }
65. Modifiers
66. modifier: Modifier = Modifier, Modifiers @Composable fun PageTitle( text: String, )
67. modifier: Modifier = Modifier, Modifiers PageTitle( text = "Home", modifier = Modifier .width(100.dp) .height(40.dp) .background(Color.LightGray) .padding(horizontal = 12.dp) ) @Composable fun PageTitle( text: String, )
68. modifier: Modifier = Modifier, Modifiers PageTitle( text = "Home", modifier = Modifier .width(100.dp) .height(40.dp) .background(Color.LightGray) .padding(horizontal = 12.dp) ) padding: Dp = 0.dp, @Composable fun PageTitle( text: String, )
69. Modifiers @Composable fun PageTitle( text: String, )
70. Modifiers @Composable fun PageTitle( text: String, ) Box( Modifier .padding(12.dp) .background(Color.Blue) ) { PageTitle("Home") }
71. Modifiers @Composable fun PageTitle( text: String, ) Box( Modifier .padding(12.dp) .background(Color.Blue) ) { PageTitle("Home") } @Composable fun PageTitle( text: String, modifier: Modifier = Modifier, ) PageTitle( "Home", Modifier .padding(12.dp) .background(Color.Blue), )
72. Modifiers › Accept a Modifier parameter
73. Modifiers › Accept a Modifier parameter › Named modifier
74. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter
75. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node
76. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
77. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
78. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
79. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
80. (modifier) (modifier) Modifiers @Composable fun Header( modifier: Modifier = Modifier, ) { Column Title() Row Button(onClick = { ... }) { Text("Docs") } Button(onClick = { ... }) { Text("Blog") } } } } { {
81. (modifier) (modifier) Modifiers @Composable fun Header( modifier: Modifier = Modifier, ) { Column Title() Row Button(onClick = { ... }) { Text("Docs") } Button(onClick = { ... }) { Text("Blog") } } } } { {
82. (modifier) (modifier) Modifiers @Composable fun Header( modifier: Modifier = Modifier, ) { Column Title() Row Button(onClick = { ... }) { Text("Docs") } Button(onClick = { ... }) { Text("Blog") } } } } { {
83. Modifiers @Composable fun MenuItems( smallScreen: Boolean, modifier: Modifier = Modifier, ) { if (smallScreen) { Column(modifier) { Text(...) Text(...) } } else { Row(modifier) { Text(...) Text(...) } } }
84. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
85. Modifiers modifier: Modifier = Modifier
86. Modifiers modifier: Modifier = Modifier interface Modifier { infix fun then(other: Modifier): Modifier = CombinedModifier(this, other) companion object : Modifier { ... override infix fun then(other: Modifier): Modifier = other override fun toString() = "Modifier" } }
87. Modifiers @Composable fun Topics( topic: List<Topic>, modifier: Modifier = Modifier, ) { Row( modifier = modifier ) { // ... } } .padding(12.dp),
88. Modifiers @Composable fun Topics( topic: List<Topic>, modifier: Modifier = Modifier, ) { Row( modifier = Modifier .then(modifier) ) { // ... } } .padding(12.dp) ,
89. jb.gg/compose-modifiers
90. Slots
91. Slots @Composable () -> Unit
92. Slots @Composable fun Button( content: @Composable () -> Unit, )
93. Slots @Composable fun Button( content: @Composable , ) Button { } } () -> Unit Row { ) ) Icon(Icons.Default.Build, "Build" Text("Build project" this: RowScope
94. Slots @Composable fun Button( content: @Composable RowScope. , ) { content() } } Button { } this: RowScope () -> Unit Row { ) ) Icon(Icons.Default.Build, "Build" Text("Build project"
95. Slots @Composable fun Button( content: @Composable RowScope. , ) { content() } } Button { } this: RowScope () -> Unit Row { ) ) Icon(Icons.Default.Build, "Build" Text("Build project"
96. Slots Button { , Modifier.weight(1f) , Modifier.weight(4f) } this: RowScope ) ) @Composable fun Button( content: @Composable RowScope. , ) { content() } } () -> Unit Row { Icon(Icons.Default.Build, "Build" Text("Build project"
97. Slots @Composable fun Button( content: @Composable RowScope.() -> Unit, ) { Row { content() } } Button { , Modifier.weight(1f)) , Modifier.weight(4f)) } this: RowScope Icon(Icons.Default.Build, "Build" Text("Build project"
98. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } }
99. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } }
100. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } } PreferenceItem
101. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } } PreferenceItem content
102. Slot lifecycle val movableContent = remember(content) { movableContentOf(content) } @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } } checked = false checked = true checked = false PreferenceItem content
103. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") movableContent() } } else { Column { Text("Unchecked") movableContent() } } } val movableContent = remember(content) { movableContentOf(content) }
104. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { val movableContent = remember(content) { movableContentOf(content) } if (checked) { Row { Text("Checked") movableContent() } } else { Column { Text("Unchecked") movableContent() } } } jb.gg/movable-content-of
105. Ordering parameters
106. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda
107. Ordering parameters fun NiaTopicTag( modifier: Modifier = Modifier, followed: Boolean, onClick: () -> Unit, enabled: Boolean = true, text: @Composable () -> Unit, ) › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda @Composable
108. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda fun NiaTopicTag( modifier: Modifier = Modifier, followed: Boolean, onClick: () -> Unit, enabled: Boolean = true, text: @Composable () -> Unit, ) @Composable
109. Ordering parameters NiaTopicTag(true, { toggleFollowed(id) }) { Text("Compose") } › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda fun NiaTopicTag( modifier: Modifier = Modifier, followed: Boolean, onClick: () -> Unit, enabled: Boolean = true, text: @Composable () -> Unit, ) @Composable
110. Ordering parameters NiaTopicTag(true, { toggleFollowed(id) } Text("Compose") } › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda fun NiaTopicTag( modifier: Modifier = Modifier, followed: Boolean, onClick: () -> Unit, enabled: Boolean = true, text: @Composable () -> Unit, ) ) { @Composable
111. Ordering parameters NiaTopicTag(true, { toggleFollowed(id) } Text("Compose") } › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit, ) ) { @Composable
112. Ordering parameters NiaTopicTag(followed = true, onClick = { toggleFollowed(id) } Text("Compose") } › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, text: @Composable () -> Unit, ) modifier: Modifier = Modifier, enabled: Boolean = true, ) { @Composable
113. Ordering parameters NiaTopicTag(true, Text("Compose") } › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, text: @Composable () -> Unit, ) modifier: Modifier = Modifier, enabled: Boolean = true, ) { { toggleFollowed(id) } @Composable
114. Ordering parameters NiaTopicTag(true, , Modifier.padding(8.dp) Text("Compose") } fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit, ) › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda { toggleFollowed(id) } ) { @Composable
115. Ordering parameters NiaTopicTag(true, { toggleFollowed(id) }, Modifier.padding(8.dp)) { Text("Compose") } fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit, ) › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda @Composable
116. Ordering parameters NiaTopicTag(true, { toggleFollowed(id) }, Modifier.padding(8.dp)) { Text("Compose") } fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, content: @Composable () -> Unit, ) › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda @Composable
117. State
118. State @Composable fun Scroller( offset: MutableState< >, ) Float
119. State @Composable fun Scroller( offset: MutableState<Float>, )
120. @Composable fun Scroller( offset: MutableState< >, ) { offset.value = 42f } State Float
121. @Composable fun Scroller( offset: , onOffsetChange: (Float) -> Unit, ) State Float
122. @Composable fun Scroller( offset: State< >, onOffsetChange: (Float) -> Unit, ) State Float
123. @Composable fun Scroller( offset: State<Float>, onOffsetChange: (Float) -> Unit, ) @Composable fun ContextMenu(offset: Float, onOffsetChange: (Float) -> Unit) { Row { MenuItems() Scroller(offset, onOffsetChange) } } State
124. @Composable fun Scroller( offset: State<Float>, onOffsetChange: (Float) -> Unit, ) @Composable fun ContextMenu(offset: Float, onOffsetChange: (Float) -> Unit) { val offsetState = remember { mutableStateOf(offset) } Row { MenuItems() Scroller(offsetState, onOffsetChange) } } State
125. @Composable fun Scroller( offset: Float, onOffsetChange: (Float) -> Unit, ) State
126. @Composable fun Scroller( offset: () -> Float, onOffsetChange: (Float) -> Unit, ) State
127. @Composable fun Scroller( offset: () -> Float, onOffsetChange: (Float) -> Unit, ) // Constant Scroller(offset = { 0f }, ...) // Plain value Scroller(offset = { offset }, ...) // State Scroller(offset = { offsetState.value }, ...) // Value from an object Scroller(offset = { someObject.offset }, ...) State
128. @Composable fun Scroller( offset: () -> Float, onOffsetChange: (Float) -> Unit, ) // Constant Scroller(offset = { 0f }, ...) // Plain value Scroller(offset = { offset }, ...) // State Scroller(offset = { offsetState.value }, ...) // Value from an object Scroller(offset = { someObject.offset }, ...) State jb.gg/debugging-recomposition
129. State holders
130. State holders @Composable fun VerticalScroller( , , onScrollPositionChange: (Int) -> Unit, onScrollRangeChange: (Int) -> Unit, ) scrollPosition: Int scrollRange: Int
131. State holders @Composable fun VerticalScroller( ) @Stable interface VerticalScrollerState { var var } scrollPosition: Int scrollRange: Int
132. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) @Stable interface VerticalScrollerState { } scrollPosition: Int scrollRange: Int var var
133. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) @Stable interface VerticalScrollerState { } scrollPosition: Int scrollRange: Int var var
134. State holders @Stable interface { } jb.gg/compose-stability @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) VerticalScrollerState scrollPosition: Int scrollRange: Int var var
135. State holders class Impl( scrollPosition: Int = 0, scrollRange: Int = 0, ) : VerticalScrollerState { override by mutableStateOf(scrollPosition) override by mutableStateOf(scrollRange) } @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) VerticalScrollerState scrollPosition: Int scrollRange: Int var var
136. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) fun VerticalScrollerState(): VerticalScrollerState = VerticalScrollerStateImpl() private class Impl( scrollPosition: Int = 0, scrollRange: Int = 0, ) : VerticalScrollerState { override var scrollPosition: Int by mutableStateOf(scrollPosition) override var scrollRange: Int by mutableStateOf(scrollRange) } VerticalScrollerState
137. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState = remember { VerticalScrollerState() } ) fun VerticalScrollerState(): VerticalScrollerState = VerticalScrollerStateImpl() private class Impl( scrollPosition: Int = 0, scrollRange: Int = 0, ) : VerticalScrollerState { override var scrollPosition: Int by mutableStateOf(scrollPosition) override var scrollRange: Int by mutableStateOf(scrollRange) } VerticalScrollerState
138. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState = remember { VerticalScrollerState() } ) fun VerticalScrollerState(): VerticalScrollerState = VerticalScrollerStateImpl() @Stable interface VerticalScrollerState { var scrollPosition: Int var scrollRange: Int } private class Impl( scrollPosition: Int = 0, scrollRange: Int = 0, ) : VerticalScrollerState { override var scrollPosition: Int by mutableStateOf(scrollPosition) override var scrollRange: Int by mutableStateOf(scrollRange) } VerticalScrollerState
139. State holders @Stable class VerticalScrollerState { var scrollPosition: Int by mutableStateOf(0) var scrollRange: Int by mutableStateOf(0) }
140. State holders @Stable class VerticalScrollerState { var scrollPosition: Int by mutableStateOf(0) var scrollRange: Int by mutableStateOf(0) }
141. Framework Library App
142. Google I/O jb.gg/io24-compose-apis Simona Milanović
143. Tooling jb.gg/compose-rules
144. Compose Multiplatform – jb.gg/compose Guidelines – jb.gg/compose-api-guidelines – jb.gg/compose-component-api- guidelines In order of appearance – jb.gg/composition-locals – jb.gg/compose-modifiers – jb.gg/movable-content-of – jb.gg/debugging-recomposition – jb.gg/compose-stability – jb.gg/io24-compose-apis – jb.gg/compose-rules Composing an API the way zsmb.co/talks Márton Braun @zsmb13@androiddev.social