使用者與應用程式互動時,經常輕觸螢幕上的元素。不過,互動形式並非唯一的互動形式。其他形式的互動可能包括:
- ChromeOS 使用者可能會使用實體鍵盤的方向鍵瀏覽畫面。
- 玩遊戲時,玩家可以使用連接的遊戲控制器瀏覽遊戲選單。
- 行動應用程式使用者可能會使用螢幕小鍵盤循環切換元素。
在這些情況下,請務必追蹤在任何時間點處於使用狀態的元件,也就是我們所謂的「聚焦」。畫面上的元素應按照邏輯順序聚焦。在大多數情況下,Jetpack Compose 預設會採用正確的處理焦點方式。然而,在某些情況下,您可能需要修改這項預設行為。
以下頁面說明如何在應用程式中使用焦點:
- 變更焦點週遊順序:說明如何變更預設的焦點順序、新增焦點群組及停用可組合項的焦點。
- 變更聚焦行為:說明如何要求、擷取及釋放焦點,以及如何在進入畫面時將焦點重新導向。
- 針對焦點做出回應:說明如何針對焦點變更做出回應、為元素新增視覺提示,以及瞭解元素的焦點狀態。
預設焦點週遊順序
在深入探討焦點搜尋的預設行為之前,請務必瞭解階層中「層級」的概念:一般來說,我們可以假設,當同層級時,兩個 Composables
位於同層級,也就是具有相同的父項。舉例來說,Column
中的元素都屬於同一層級。向上升級是指從子項移至其 Composable
父項,或者保留相同的範例,從項目返回包含該層級的 Column
。從 Column
父項到包含的項目,則是從另一個層面往下的。這個概念適用於所有可包含其他 Composables
的 Composable
。
UI 導覽可透過多種方式執行,其中大多數使用者已經知道:
- TAB:單向瀏覽 (前往前一或向後)。TAB 導覽可將焦點引導至階層中的下一個或上一個元素。根據預設,Compose 會遵循
Composables
的宣告。單向瀏覽可透過鍵盤上的tab
鍵,或手錶上的旋轉邊框,這種聚焦搜尋就會造訪畫面上的每個元素。 - 方向鍵:二維瀏覽,到向左、向右、上或下。 您可以透過電視的 D-Pad 或鍵盤上的方向鍵使用 D-Pad 進行二維導覽,而且遍歷順序只會造訪指定等級的元素。您可以使用 D-Pad 中心和返回按鈕前往不同樓層。
以下方的螢幕截圖為例,其中有四個按鈕,一個按鈕下方,而您想要按照顯示順序逐一瀏覽各個按鈕。Jetpack Compose 提供立即可用的這項行為:工具包可讓您透過 tab
鍵,由上而下按垂直方向循環瀏覽各個可組合項,或是按向上或向下鍵移動焦點。
如果切換成其他類型的版面配置,設定會有些微影響。如果版面配置有多個欄 (例如下方版面配置),Jetpack Compose 可讓您瀏覽各欄,無須新增任何程式碼。如果按下 tab
鍵,Jetpack Compose 會自動依照宣告順序 (從第一到第四) 醒目顯示項目。使用鍵盤上的方向鍵,即可按照 2D 空間中的所需方向進行選取。
Column { Row { TextButton({ }) { Text("First field") } TextButton({ }) { Text("Second field") } } Row { TextButton({ }) { Text("Third field") } TextButton({ }) { Text("Fourth field") } } }
Composables
會在兩個 Rows
中宣告,而焦點元素會依序宣告,從第一到第四。按下 tab
鍵時,會產生下列焦點順序:
在下方程式碼片段中,您是在 Columns
(而非 Rows
) 中宣告項目:
Row { Column { TextButton({ }) { Text("First field") } TextButton({ }) { Text("Second field") } } Column { TextButton({ }) { Text("Third field") } TextButton({ }) { Text("Fourth field") } } }
此版面配置會從螢幕開頭到結尾,以垂直方式從上到下週遊項目:
前兩個範例雖然單向導覽不同,但以二維瀏覽方式提供相同的體驗。這通常是因為畫面上的項目在上述兩個範例中屬於相同的地理位置。從第一個 Column
向右導覽可將焦點移到第二個位置,而在第一個項目往下瀏覽,Row
會將焦點移到下方的下一個項目。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 變更焦點行為
- Compose 中的 ConstraintLayout
- Compose 中的資料流版面配置