Target fokus

Target fokus adalah elemen UI yang dapat difokuskan oleh keyboard. Pengguna dapat memindahkan fokus keyboard dengan tombol Tab atau tombol arah (panah):

• Tab atau Shift+Tab — Memindahkan fokus maju atau mundur dalam urutan tampilan satu dimensi.
• Tombol arah — Memindahkan fokus secara dua dimensi (Atas, Bawah, Kiri, dan Kanan).

Elemen UI interaktif adalah target fokus secara default

Komponen interaktif adalah target fokus secara default. Dengan kata lain, elemen UI adalah target fokus jika pengguna dapat mengetuk atau mengkliknya.

Misalnya, pertimbangkan tiga komponen Card. Jika kartu pertama dan ketiga bersifat interaktif (menentukan callback onClick), tetapi kartu kedua murni informatif (tidak memiliki penanganan klik), menekan tombol Tab pada kartu pertama akan melewati kartu kedua dan langsung berpindah ke kartu ketiga.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}
FocusTarget.kt

Anda dapat menjadikan kartu kedua sebagai target fokus dengan memberikan parameter onClick:

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}
FocusTarget.kt

Pengubah clickable juga mengubah elemen UI kustom atau standar menjadi target fokus. Lihat Ketuk dan tekan untuk mengetahui detailnya.

Peringatan: Jangan gunakan pengubah focusable dan pengubah clickable secara bersamaan. Hal ini menyebabkan perilaku yang salah karena membuat dua target fokus independen.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}
FocusTarget.kt

Menjadikan composable sebagai target fokus yang tidak dapat diklik

Pengubah focusable membuat composable menjadi target fokus tanpa memerlukan semantik klik. Pengguna dapat memindahkan fokus keyboard ke composable yang diubah (misalnya, untuk memeriksa konten dengan alat aksesibilitas atau men-scroll area tampilan), tetapi menekan tombol Enter atau Space tidak memicu tindakan klik:

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}
FocusTarget.kt

Membuat composable tidak dapat difokuskan

Dalam beberapa skenario, Anda mungkin ingin mengecualikan elemen interaktif dari navigasi keyboard tanpa menonaktifkan peristiwa klik atau penunjuk. Anda dapat mencegah komponen menerima fokus dengan menyetel canFocus = false di dalam pengubah focusProperties:

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)
FocusSnippets.kt