變更焦點週遊順序

「預設焦點週遊順序」一節說明瞭 Compose 會在單維 (tab 鍵) 和 2D (方向鍵) 導覽中，自動為元素新增焦點週遊行為。在某些情況下，您可能需要覆寫這個預設行為，並清楚說明所需的周遊順序。

覆寫一維週遊順序

如要變更單維導覽的預設焦點週遊順序，請建立一組參照，每個可聚焦的可組合項目：

val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
FocusSnippets.kt

接著，使用 focusRequester 修飾符將每個修飾符與可組合項建立關聯：

Column {
    Row {
        TextButton({}, Modifier.focusRequester(first)) { Text("First field") }
        TextButton({}, Modifier.focusRequester(third)) { Text("Third field") }
    }

    Row {
        TextButton({}, Modifier.focusRequester(second)) { Text("Second field") }
        TextButton({}, Modifier.focusRequester(fourth)) { Text("Fourth field") }
    }
}
FocusSnippets.kt

您現在可以使用 focusProperties 修飾符指定自訂週遊順序：

Column {
    Row {
        TextButton(
            {},
            Modifier
                .focusRequester(first)
                .focusProperties { next = second }
        ) {
            Text("First field")
        }
        TextButton(
            {},
            Modifier
                .focusRequester(third)
                .focusProperties { next = fourth }
        ) {
            Text("Third field")
        }
    }

    Row {
        TextButton(
            {},
            Modifier
                .focusRequester(second)
                .focusProperties { next = third }
        ) {
            Text("Second field")
        }
        TextButton(
            {},
            Modifier
                .focusRequester(fourth)
                .focusProperties { next = first }
        ) {
            Text("Fourth field")
        }
    }
}
FocusSnippets.kt

覆寫二維週遊順序

您也可以使用方向鍵，針對 2D 導覽的 2D 導覽新增精細的焦點週遊順序。您可以針對每個元素覆寫各個路線的預設導覽目的地，方法是新增 focusProperties 修飾符，並指定上、下或其他方向的項目：

TextButton(
    onClick = {},
    modifier = Modifier
        .focusRequester(fourth)
        .focusProperties {
            down = third
            right = second
        }
) {}
FocusSnippets.kt

這項技術不僅能有效使用鍵盤箭頭，也適用於有線和無線控制器上的 D-Pad 和滴答。