Mengubah urutan traversal fokus

Bagian Urutan traversal fokus default menjelaskan cara Compose secara otomatis menambahkan perilaku focus traversal ke elemen Anda, baik navigasi satu dimensi (tombol tab) dan dua dimensi (tombol panah). Di beberapa yang berbeda, Anda mungkin perlu mengganti perilaku default ini dan urutan traversal yang diperlukan.

Ganti urutan traversal satu dimensi

Untuk mengubah urutan traversal fokus default untuk navigasi satu dimensi, Anda membuat kumpulan referensi, satu untuk setiap composable yang dapat difokuskan:

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

Selanjutnya, gunakan pengubah focusRequester untuk mengaitkan setiap elemen tersebut dengan composable:

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

Anda kini dapat menggunakan pengubah focusProperties untuk menentukan urutan traversal kustom:

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

Ganti urutan traversal dua dimensi

Dimungkinkan juga untuk menambahkan kontrol halus atas urutan traversal fokus untuk navigasi dua dimensi menggunakan tombol panah. Untuk setiap elemen, Anda bisa mengganti tujuan navigasi default untuk setiap rute dengan menambahkan pengubah focusProperties dan menentukan item yang akan muncul, ke bawah, atau arah lain:

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

Teknik ini tidak hanya menggunakan panah {i>keyboard<i} secara efektif, tetapi juga bekerja dengan D-Pads dan stick pada pengontrol berkabel dan nirkabel.