旋轉輸入是指轉動或旋轉手錶零件來輸入內容。使用者與手錶互動的時間平均只有幾秒鐘,因此建議您使用旋轉輸入機制,讓使用者快速完成各項工作,打造更優質的使用者體驗。
多數手錶上的三個主要旋轉輸入來源,包括側邊旋轉按鈕 (RSB)、實體邊框或觸控邊框,後者是指螢幕周圍的圓形觸控區。即使預期的行為可能因輸入類型而有所不同,請務必為所有重要互動方式支援旋轉輸入。
捲動
大多數使用者會預期應用程式支援捲動手勢。使用者在畫面上捲動內容時,請提供回應旋轉互動動作的視覺回饋。視覺回饋可包括用於垂直捲動的位置指標或頁面指標。
ScalingLazyColumn
和 Picker
預設支援捲動手勢。
只要您需要將這些元件放在 Scaffold
中即可Scaffold
可提供基本的版面配置結構
且已提供用於捲動指標的版位。目的地:
請根據要顯示的位置
清單狀態物件,如以下程式碼片段所示:
val listState = rememberScalingLazyListState() Scaffold( positionIndicator = { PositionIndicator(scalingLazyListState = listState) } ) { // ... }
您可以在 ScalingLazyColumn
使用
ScalingLazyColumnDefaults.snapFlingBehavior
,如下所示
程式碼片段:
val listState = rememberScalingLazyListState() Scaffold( positionIndicator = { PositionIndicator(scalingLazyListState = 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 新增鍵盤、滑鼠、觸控板和觸控筆支援功能
- Compose for Wear OS 程式碼研究室