Composing an API the *right* way (Droidcon Italy 2023)

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.

Transcript

1. @zsmb13 Composing an API the way Márton Braun Developer Advocate, JetBrains
2. API design
3. API design Framework Library App
4. API design Framework Library App
5. Guidelines
6. Guidelines
7. Guidelines jb.gg/compose
8. Guidelines jb.gg/compose
9. Agenda › Naming › Parameters › Default values › Modifiers › Slots › State handling
10. Naming
11. Constants const val SOME_LOUD_CONSTANT = 999999
12. Constants const val SOME_LOUD_CONSTANT = 999999
13. Constants const val DefaultKeyName = "__defaultKey"
14. Constants const val DefaultKeyName = "__defaultKey" val StructurallyEqual: ComparisonPolicy = StructurallyEqualsImpl()
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>() }
16. 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, }
17. Functions
18. Functions It depends.
19. Functions Return a value Emit content
20. Functions Return a value Emit content
21. Functions Return a value Emit content
22. Functions Return a value Emit content @Composable fun Column(...) @Composable fun LaunchedEffect(...) @Composable fun Button(...)
23. 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(...)
24. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme
25. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme
26. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme @Composable fun colorScheme(darkTheme: Boolean): ColorScheme
27. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme @Composable fun colorScheme(darkTheme: Boolean): ColorScheme @Composable fun rememberCoroutineScope(): CoroutineScope @Composable fun CoroutineScope(): CoroutineScope
28. Component /kəmˈpəʊnənt/ noun
29. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
30. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
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 { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") Row { Button { Text("Docs") } Button { Text("Blog") } } } }
33. Components @Composable fun Header() { Column { Row { Button { Text("Docs") } Button { Text("Blog") } } } } Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.")
34. Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { } Components @Composable fun Header() { Column { 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 Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { } @Composable fun Header() { Column { Title() Row { Button { Text("Docs") } Button { Text("Blog") } } } }
37. Components Kotlin programming language Concise. Cross-platform. Fun. Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { }
38. Components Kotlin programming language Concise. Cross-platform. Fun. Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { Column { } }
39. Components Concise. Cross-platform. Fun. Kotlin programming language Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") @Composable fun Title() { Column { } }
40. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
41. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
42. Components @Composable fun InputField : { // ... } val inputState = InputField Button(onClick = { inputState.value = "" }) { Text("Clear input") } UserInputState () ()
43. Components @Composable fun InputField : { // ... } Button(onClick = { inputState.value = "" }) { Text("Clear input") } InputField UserInputState val inputState = () ()
44. Components @Composable fun InputField : UserInputState { // ... } InputField () () Button(onClick = { inputState.value = "" }) { Text("Clear input") } val inputState =
45. Components @Composable fun InputField inputState: { // ... } remember { UserInputState() } InputField inputState UserInputState val 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() } InputField(inputState) Button(onClick = { inputState.value = "" }) { Text("Clear input") }
48. Components @Composable fun InputField(inputState: UserInputState) { // ... } val inputState = remember { UserInputState() } Button(onClick = { inputState.value = "" }) { Text("Clear input") } InputField(inputState)
49. Components Data UI
50. Parameters
51. CompositionLocal jb.gg/composition-locals
52. CompositionLocal jb.gg/composition-locals
53. CompositionLocal jb.gg/composition-locals
54. CompositionLocal jb.gg/composition-locals
55. CompositionLocal Data Styles jb.gg/composition-locals
56. > Parameters CompositionLocal explicit implicit
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. 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, )
59. @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 )
60. 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 // ... } ) {
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 @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, )
63. 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(),
64. Default arguments object ButtonDefaults { } @Composable fun buttonColors(...): ButtonColors = ButtonColors(...) Button( onClick = { viewModel.savePage() }, colors = customColors ?: ButtonDefaults.buttonColors(), ) { Text("Save") }
65. Default arguments internal object ButtonDefaults { @Composable fun buttonColors(...): ButtonColors = ButtonColors(...) } Button( onClick = { viewModel.savePage() }, colors = customColors ?: ButtonDefaults.buttonColors(), ) { Text("Save") }
66. Modifiers
67. modifier: Modifier = Modifier, Modifiers @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) ) @Composable fun PageTitle( text: String, )
69. 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, )
70. Modifiers @Composable fun PageTitle( text: String, )
71. Modifiers @Composable fun PageTitle( text: String, ) Box( Modifier .padding(12.dp) .background(Color.Blue) ) { PageTitle("Home") }
72. 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), )
73. Modifiers › Accept a Modifier parameter
74. Modifiers › Accept a Modifier parameter › Named modifier
75. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter
76. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node
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. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
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 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"
96. 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"
97. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } }
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() } } } PreferenceItem
100. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } } PreferenceItem content
101. 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
102. 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) }
103. 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
104. Ordering parameters
105. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda
106. 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
107. 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, )
108. 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, )
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, ) ) {
110. 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, ) ) {
111. 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, ) {
112. 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) }
113. 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) } ) {
114. 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
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, content: @Composable () -> Unit, ) › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda
116. State
117. State @Composable fun Scroller( offset: MutableState< >, ) Float
118. State @Composable fun Scroller( offset: MutableState<Float>, )
119. @Composable fun Scroller( offset: MutableState< >, ) { offset.value = 42f } State Float
120. @Composable fun Scroller( offset: , onOffsetChange: (Float) -> Unit, ) State Float
121. @Composable fun Scroller( offset: State< >, onOffsetChange: (Float) -> Unit, ) State Float
122. @Composable fun Scroller( offset: State<Float>, onOffsetChange: (Float) -> Unit, ) @Composable fun ContextMenu(offset: Float, onOffsetChange: (Float) -> Unit) { Row { MenuItems() Scroller(offset, onOffsetChange) } } State
123. @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
124. @Composable fun Scroller( offset: Float, onOffsetChange: (Float) -> Unit, ) State
125. @Composable fun Scroller( offset: () -> Float, onOffsetChange: (Float) -> Unit, ) State
126. @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
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 jb.gg/debugging-recomposition
128. State holders
129. State holders @Composable fun VerticalScroller( , , onScrollPositionChange: (Int) -> Unit, onScrollRangeChange: (Int) -> Unit, ) scrollPosition: Int scrollRange: Int
130. State holders @Composable fun VerticalScroller( ) @Stable interface VerticalScrollerState { var var } scrollPosition: Int scrollRange: Int
131. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) @Stable interface VerticalScrollerState { } scrollPosition: Int scrollRange: Int var var
132. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) @Stable interface VerticalScrollerState { } scrollPosition: Int scrollRange: Int var var
133. State holders @Stable interface { } jb.gg/compose-stability @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) VerticalScrollerState scrollPosition: Int scrollRange: Int var var
134. 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
135. 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
136. 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
137. 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
138. State holders @Stable class VerticalScrollerState { var scrollPosition: Int by mutableStateOf(0) var scrollRange: Int by mutableStateOf(0) }
139. State holders @Stable class VerticalScrollerState { var scrollPosition: Int by mutableStateOf(0) var scrollRange: Int by mutableStateOf(0) }
140. Conclusion
141. Framework Library App
142. 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 Composing an API the way zsmb.co/talks Márton Braun @zsmb13@androiddev.social