onPreRotaryScrollEvent
Common
Modifier in Compose Ui
Adding this [modifier][Modifier] to the [modifier][Modifier] parameter of a component will allow it to intercept [RotaryScrollEvent]s if it (or one of its children) is focused.
Last updated:
Installation
dependencies {
implementation("androidx.compose.ui:ui:1.8.0-alpha04")
}
Overloads
fun Modifier.onPreRotaryScrollEvent(
onPreRotaryScrollEvent: (RotaryScrollEvent) -> Boolean
): Modifier
Parameters
name | description |
---|---|
onPreRotaryScrollEvent | This callback is invoked when the user interacts with the rotary button on a wear device. It gives ancestors of a focused component the chance to intercept a [RotaryScrollEvent].When the user rotates the side button on a wear device, a [RotaryScrollEvent] is sent to thefocused item. Before reaching the focused item, this event starts at the root composable, andpropagates down the hierarchy towards the focused item. It invokes any [onPreRotaryScrollEvent]sit encounters on ancestors of the focused item. After reaching the focused item, the eventpropagates up the hierarchy back towards the parent. It invokes any [onRotaryScrollEvent]s itencounters on its way back.Return true to indicate that you consumed the event and want to stop propagation of this event. |
Code Example
PreRotaryEventSample
@Composable
fun PreRotaryEventSample() {
MaterialTheme(colors = darkColors()) {
val rowScrollState = rememberScrollState()
val columnScrollState = rememberScrollState()
val coroutineScope = rememberCoroutineScope()
val focusRequester = remember { FocusRequester() }
var interceptScroll by remember { mutableStateOf(false) }
Column(
Modifier.onPreRotaryScrollEvent {
// You can intercept an event before it is sent to the child.
if (interceptScroll) {
coroutineScope.launch { rowScrollState.scrollBy(it.horizontalScrollPixels) }
// return true to consume this event.
true
} else {
// return false to ignore this event and continue propagation to the child.
false
}
}
.onRotaryScrollEvent {
// If the child does not use the scroll, we get notified here.
coroutineScope.launch { rowScrollState.scrollBy(it.horizontalScrollPixels) }
true
}
) {
Row(
modifier = Modifier.align(CenterHorizontally),
verticalAlignment = CenterVertically
) {
Text(
modifier = Modifier.width(70.dp),
text = if (interceptScroll) "Row" else "Column",
style = TextStyle(color = White)
)
Switch(
checked = interceptScroll,
onCheckedChange = { interceptScroll = it },
)
}
Row(modifier = Modifier.fillMaxWidth().horizontalScroll(rowScrollState)) {
repeat(100) {
Text(
text = "row item $it ",
modifier = Modifier.align(CenterVertically),
color = White,
)
}
}
Column(
modifier =
Modifier.fillMaxWidth()
.verticalScroll(columnScrollState)
.onRotaryScrollEvent {
coroutineScope.launch {
columnScrollState.scrollBy(it.verticalScrollPixels)
}
true
}
.focusRequester(focusRequester)
.focusable(),
) {
repeat(100) {
Text(
text = "column item $it",
modifier = Modifier.align(CenterHorizontally),
color = White,
)
}
}
}
LaunchedEffect(Unit) { focusRequester.requestFocus() }
}
}