變更焦點週遊順序

「預設焦點週遊順序」一節說明瞭 Compose 自動將焦點遍歷行為新增至元素 單維 (tab 鍵) 和二維 (方向鍵) 導覽功能。某些 您可能需要覆寫這個預設行為 所需的遍歷順序

覆寫一維週遊順序

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

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

覆寫二維週遊順序

您也可以針對焦點週遊順序新增精細的控制項 使用方向鍵進行平面導覽您可以為每個元素 透過新增 focusProperties 修飾符並指定將出現的項目。 向下或任何其他方向：

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

這項技巧不但有效利用鍵盤箭頭，還能 有線和無線控制器的 D-Pad 和像子那樣。

上一頁
總覽
下一頁
變更焦點行為