本頁面由 Cloud Translation API 翻譯而成。

使用 Compose 進行旋轉輸入

旋轉輸入是指轉動或旋轉手錶零件來輸入內容。使用者與手錶互動的時間平均只有幾秒鐘，因此建議您使用旋轉輸入機制，讓使用者快速完成各項工作，打造更優質的使用者體驗。

多數手錶上的三個主要旋轉輸入來源，包括側邊旋轉按鈕 (RSB)、實體邊框或觸控邊框，後者是指螢幕周圍的圓形觸控區。即使預期的行為可能因輸入類型而有所不同，請務必為所有重要互動方式支援旋轉輸入。

捲動

大多數使用者會預期應用程式支援捲動手勢。使用者在畫面上捲動內容時，請提供回應旋轉互動動作的視覺回饋。視覺回饋可包括用於垂直捲動的位置指標或頁面指標。

ScalingLazyColumn 和 Picker 預設支援捲動手勢。只要您需要將這些元件放在 Scaffold 中即可Scaffold 可提供基本的版面配置結構且已提供用於捲動指標的版位。目的地：請根據要顯示的位置清單狀態物件，如以下程式碼片段所示：

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {
    // ...
}Rotary.kt

您可以在 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
        // ...
    }
}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(),
) { ... }

使用 Compose 進行旋轉輸入

捲動

自訂動作

為您推薦