使用者與應用程式互動時，經常輕觸螢幕上的元素。不過，互動形式並非唯一的互動形式。其他形式的互動可能包括：
- 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 中的資料流版面配置