Jetpack Compose Glimmer 中的焦點

適用的 XR 裝置
這份指南可協助您為這類 XR 裝置打造體驗。
顯示眼鏡

所有 Jetpack Compose Glimmer 元件的設計宗旨,都是搭配標準輸入方法 (例如輕觸或滑動眼鏡的觸控板) 運作,同時也能接收顯示眼鏡硬體專屬的低階輸入指令。Jetpack Compose Glimmer 元件會自動處理必要的輸入事件。

對於捲動和拖曳等標準動作,請使用 Jetpack Compose Glimmer 元件,確保一致的體驗。不過,如果是自訂元件或專屬互動行為,可以使用現有的 Compose API,例如 Modifier.draggableModifier.scrollable

指標輸入和焦點

在顯示眼鏡上,指標輸入可能會影響焦點:

  • 輕觸:直接互動,用於啟動元素。使用者與元素互動時,焦點會移至該元素。
  • 滑動:用於瀏覽和捲動。系統會自動將未處理的滑動手勢轉換為焦點移動,因此使用者不必直接輸入指標,就能順暢瀏覽 UI。

使用者瀏覽應用程式時,焦點移動和順序變更。

聚焦移動

在可捲動的容器上,焦點會隨著觸控板上的滑動動作持續移動。如果是按鈕列等個別元素,每次滑動會將焦點移至一個元素。

焦點順序

與 Jetpack Compose 相同,Jetpack Compose Glimmer 也會使用一維焦點搜尋。如要進一步瞭解焦點遍歷順序,請參閱「變更焦點遍歷順序」。

如要變更一開始聚焦的項目,可以新增頂層的 Modifier.focusGroup(),並指定自訂 onEnter focusProperty

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        // Prevent focus from exiting the group
        cancelFocusChange()
    }
}
.focusGroup()

捲動容器

為提供最佳使用者體驗,捲動容器 (例如清單) 應是畫面上的唯一主要元件。請勿將可捲動的清單直接放在其他互動式元素 (例如按鈕) 的上方或下方,以免導覽混淆,並確保焦點移動順暢且可預測。

預設焦點狀態

Jetpack Compose Glimmer 會在可互動的元件 (包括介面、資訊卡和清單項目) 中實作預設焦點狀態,在使用者互動期間提供一致且清楚的視覺回饋。

圖 1. Jetpack Compose Glimmer 中的三種焦點狀態,會使用以輪廓為基礎的視覺回饋來區分。
  • 預設:按鈕的背景顏色衍生自 GlimmerTheme.colors.surface,主要內容會計算該表面的內容顏色。

  • 已聚焦:框線寬度會增加,表示已聚焦。

  • 已聚焦 + 已按下:背景會設為 GlimmerTheme.colors.surface,並提高不透明度,表示已選取該項目。