Mengubah urutan traversal fokus

Bagian Urutan traversal fokus default menjelaskan cara Compose menambahkan perilaku traversal fokus secara otomatis ke elemen Anda, untuk navigasi satu dimensi (tombol tab) dan dua dimensi (tombol panah). Dalam beberapa kasus, Anda mungkin perlu mengganti perilaku default ini dan lebih eksplisit tentang urutan traversal yang diperlukan.

Mengganti urutan traversal satu dimensi

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

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

Kemudian, gunakan pengubah focusRequester untuk mengaitkan setiap pengubah 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

Mengganti urutan traversal dua dimensi

Anda juga dapat menambahkan kontrol mendetail atas urutan traversal fokus untuk navigasi dua dimensi dengan tombol panah. Untuk setiap elemen, Anda dapat mengganti tujuan navigasi default untuk setiap rute dengan menambahkan pengubah focusProperties dan menentukan item yang akan naik, turun, atau arah lainnya:

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

Teknik ini tidak hanya menggunakan panah keyboard secara efektif, tetapi akan berfungsi dengan D-Pad dan menempel pada pengontrol berkabel dan nirkabel.