onPreRotaryScrollEvent

fun Modifier.onPreRotaryScrollEvent(
    onPreRotaryScrollEvent: (RotaryScrollEvent) -> Boolean
): Modifier

Adding this modifier to the modifier parameter of a component will allow it to intercept RotaryScrollEvents if it (or one of its children) is focused.

When the user rotates the side button on a wear device, a RotaryScrollEvent is sent to the focused item. Before reaching the focused item, this event starts at the root composable, and propagates down the hierarchy towards the focused item. It invokes any onPreRotaryScrollEvents it encounters on ancestors of the focused item. After reaching the focused item, the event propagates up the hierarchy back towards the parent. It invokes any onRotaryScrollEvents it encounters on its way back.

Return true to indicate that you consumed the event and want to stop propagation of this event.

Parameters

Returns

Code Examples

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() }
    }
}