旋转输入是指来自手表中可旋转部件的输入。平均而言,用户只花几秒钟与手表交互。您可以通过旋转输入增强用户体验,让用户快速完成各种任务。
大多数手表上旋转输入的三个主要来源包括旋转侧按钮 (RSB),以及物理表圈或触摸表圈(屏幕周围的圆形触摸区域)。虽然预期行为可能因输入类型而异,但请务必支持所有基本交互的旋转输入。
滚动
大多数用户期望应用支持滚动手势。当内容在屏幕上滚动时,响应旋转交互向用户提供视觉反馈。视觉反馈可以包括用于垂直滚动的滚动指示器或页面指示器。
ScalingLazyColumn
、TransformingLazyColumn
和 Picker
默认支持滚动手势,只要您需要将这些组件放置在 AppScaffold
和 ScreenScaffold
内,并在 ScreenScaffold
和组件(例如 TransformingLazyColumn
)之间传递列表状态即可。
AppScaffold
和 ScreenScaffold
为 Wear OS 应用提供了基本的布局结构,并且已经有一个用于滚动指示器的槽位,并带有默认实现。要自定义滚动进度,请根据列表状态对象创建滚动指示器,如以下代码片段所示
val listState = rememberTransformingLazyColumnState() ScreenScaffold( scrollState = listState, scrollIndicator = { ScrollIndicator(state = listState) } ) { // ... }
您可以使用 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 // ... } }
自定义操作
您还可以在应用中创建响应旋转输入的自定义操作。例如,使用旋转输入进行缩放或控制媒体应用中的音量。
如果您的组件不原生支持滚动事件(如音量控制),您可以自行处理滚动事件。
// 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(),
) { ... }
为您推荐
- 注意:当 JavaScript 关闭时,会显示链接文本
- 改变焦点行为
- 通过 Jetpack Compose 添加键盘、鼠标、触控板和手写笔支持
- Wear OS Compose 编程实验室