在 Compose 中聚焦

使用者與應用程式互動時，通常會觸控螢幕上的元素。不過，這並非唯一的互動形式。其他互動形式可能包括：

• ChromeOS 使用者可能會使用實體鍵盤上的方向鍵瀏覽畫面。
• 玩遊戲時，玩家可以使用連接的遊戲控制器瀏覽遊戲選單。
• 行動應用程式使用者可能會使用螢幕小鍵盤循環切換元素。

在這些情況下，請務必追蹤在任何時間點處於啟用狀態的元件，這就是所謂的「焦點」。畫面上的元素應以邏輯順序為焦點。Jetpack Compose 預設的焦點處理方式在大多數情況下都正確無誤。不過，在某些情況下，您可能需要修改這項預設行為。

以下網頁說明如何在應用程式中使用焦點：

• 變更焦點周遊順序：說明如何變更預設焦點順序、新增焦點群組，以及停用可組合項的焦點。
• 變更焦點行為：說明如何要求、擷取及釋放焦點，以及如何在進入畫面時重新導向焦點。
• 回應焦點：說明如何回應焦點變更、在元素中新增視覺提示，以及瞭解元素的焦點狀態。

預設焦點遍歷順序

深入瞭解焦點搜尋的預設行為之前，請務必先瞭解階層中的「層級」概念：一般來說，當兩個 Composables 是同層級的兄弟姊妹時，表示兩者具有相同的父項。舉例來說，Column 內的元素位於同一層級。向上層移動是指從子項移至父項，或以相同範例來說，從項目返回包含該項目的 Column。Composable從 Column 父項到所含項目，則是向下一個層級移動。這個概念可套用至每個可包含其他 Composables 的 Composable。

注意： 如要瞭解如何手動控管焦點順序，請參閱「控制遍歷順序」。

使用者可以透過多種方式進行 UI 導覽，其中有些是大多數使用者已知的：

• TAB 鍵：一維導覽，可向前或向後移動。TAB 導覽會將焦點移至階層中的下一個或上一個元素。根據預設，Compose 會遵循 Composables 的宣告。如要單向瀏覽，請使用鍵盤上的 tab 鍵或手錶上的旋轉錶圈，這類焦點搜尋會逐一瀏覽畫面上的每個元素。
• 方向鍵：二維導覽，可向左、向右、向上或向下移動。 您可以使用電視上的 D-Pad 或鍵盤上的箭頭鍵進行二維導覽，且遍歷順序只會造訪特定層級的元素。你可以使用 D-Pad 中心和返回按鈕，向下和向上返回不同層級。

以下方螢幕截圖為例，您有四個按鈕，一個在另一個下方，且您想依顯示順序逐一循環瀏覽這些按鈕。Jetpack Compose 提供這項預設行為：工具包可讓您使用 tab 鍵，依垂直順序從上到下逐一瀏覽每個可組合函式，或按 向上或向下鍵移動焦點。

圖 1. 以小型板型規格顯示的按鈕清單

切換成其他類型的版面配置時，情況會略有不同。如果版面配置有多個欄，例如下方的版面配置，Jetpack Compose 可讓您瀏覽這些欄，不必新增任何程式碼。如果按下 tab 鍵，Jetpack Compose 會自動依宣告順序醒目顯示項目，從「First」到「Fourth」。使用鍵盤上的方向鍵，即可讓選取範圍在 2D 空間中朝所需方向移動。

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Composables 會在兩個 Rows 中宣告，而焦點元素會依序宣告，從第一個到第四個。按下 tab 鍵時，會產生下列焦點順序：

圖 2. 在較大的外型規格中，並排顯示兩欄按鈕

在下列程式碼片段中，您會在 Columns 中宣告項目，而不是在 Rows 中：

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

這個版面配置會從螢幕開頭到結尾，由上到下垂直遍歷項目：

圖 3. 在較大的外型規格中，並排顯示兩欄按鈕

雖然前兩個範例的單向導覽有所不同，但二維導覽體驗相同。通常是因為畫面上的項目在兩個範例中都位於相同地理位置。從第一個 Column 向右導覽會將焦點移至第二個，從第一個 Row 向下導覽則會將焦點移至下方的項目。

注意： 焦點屬性是特殊情況，如果發生衝突或重複，一律由父項勝出。使用焦點時，請注意這點。