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() }
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") } } }
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") } } }
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 } ) {}
Teknik ini tidak hanya menggunakan panah keyboard secara efektif, tetapi akan berfungsi dengan D-Pad dan menempel pada pengontrol berkabel dan nirkabel.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Mengubah perilaku fokus
- Fokus di Compose