旋转输入与 Compose

旋转输入是指来自手表中可旋转部件的输入。平均而言，用户只花几秒钟与手表交互。您可以通过旋转输入增强用户体验，让用户快速完成各种任务。

大多数手表上旋转输入的三个主要来源包括旋转侧按钮 (RSB)，以及物理表圈或触摸表圈（屏幕周围的圆形触摸区域）。虽然预期行为可能因输入类型而异，但请务必支持所有基本交互的旋转输入。

滚动

大多数用户期望应用支持滚动手势。当内容在屏幕上滚动时，响应旋转交互向用户提供视觉反馈。视觉反馈可以包括用于垂直滚动的滚动指示器或页面指示器。

ScalingLazyColumn、TransformingLazyColumn 和 Picker 默认支持滚动手势，只要您需要将这些组件放置在 AppScaffold 和 ScreenScaffold 内，并在 ScreenScaffold 和组件（例如 TransformingLazyColumn）之间传递列表状态即可。

AppScaffold 和 ScreenScaffold 为 Wear OS 应用提供了基本的布局结构，并且已经有一个用于滚动指示器的槽位，并带有默认实现。要自定义滚动进度，请根据列表状态对象创建滚动指示器，如以下代码片段所示

val listState = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {
    // ...
}
Rotary.kt

您可以使用 ScalingLazyColumnDefaults.snapFlingBehavior 为 ScalingLazyColumn 配置吸附行为，如以下代码片段所示

val listState = rememberScalingLazyListState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {

    val state = rememberScalingLazyListState()
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = state,
        flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state)
    ) {
        // Content goes here
        // ...
    }
}
Rotary.kt

自定义操作

您还可以在应用中创建响应旋转输入的自定义操作。例如，使用旋转输入进行缩放或控制媒体应用中的音量。

如果您的组件不原生支持滚动事件（如音量控制），您可以自行处理滚动事件。

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            // handle rotary scroll events
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }

创建在视图模型中管理的自定义状态，以及用于处理旋转滚动事件的自定义回调。

// VolumeViewModel.kt

object VolumeRange(
    public val max: Int = 10
    public val min: Int = 0
)

val volumeState: MutableStateFlow<Int> = ...

fun onVolumeChangeByScroll(pixels: Float) {
    volumeState.value = when {
        pixels > 0 -> min (volumeState.value + 1, VolumeRange.max)
        pixels < 0 -> max (volumeState.value - 1, VolumeRange.min)
    }
}

为了简单起见，前面的示例使用了像素值，如果实际使用，这些值可能会过于敏感。

一旦收到事件，就使用回调，如以下片段所示。

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeState by volumeViewModel.volumeState.collectAsState()

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel
                .onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }