Jetpack Compose Glimmer 中的焦點

適用 XR 裝置

這份指南可協助您為這類 XR 裝置打造體驗。

瞭解 XR 裝置類型 →

瞭解 XR 裝置類型 →

所有 Jetpack Compose Glimmer 元件的設計宗旨，都是搭配標準輸入方法 (例如輕觸或滑動 AI 眼鏡的觸控板) 運作，同時也能接收 AI 眼鏡硬體專屬的低階輸入指令。Jetpack Compose Glimmer 元件會自動處理必要的輸入事件。如果是自訂元件，您可以運用 Modifier.draggable 或 Modifier.scrollable 等現有的 Compose API，實作特定的互動行為。

在附有螢幕的 AI 眼鏡上，指標輸入可能會影響焦點：

• 輕觸：直接互動，啟動元素。使用者與元素互動時，焦點會移至該元素。
• 滑動：用於瀏覽和捲動。系統會自動將未處理的滑動手勢轉換為焦點移動，讓使用者無需直接輸入指標，即可順暢瀏覽 UI。

導覽行為和順序

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

聚焦移動

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

焦點順序

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

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

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

捲動容器

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

預設焦點狀態

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

• 預設：按鈕的背景顏色衍生自 GlimmerTheme.colors.surface，主要內容會計算該介面的內容顏色，而圖示為 GlimmerTheme.colors.primary。

• 已聚焦：邊框寬度會增加，表示已聚焦。

• 已聚焦 + 已按下：背景會設為 GlimmerTheme.colors.surface，不透明度為 100%，表示已選取該狀態。