Memberikan isyarat visual untuk visualisasi fokus yang lebih mudah
Meskipun semua elemen yang dapat difokuskan dari Tema Material sudah memiliki gaya fokus yang cocok dengan tema, Anda mungkin perlu menambahkan beberapa elemen visual agar elemen yang difokuskan lebih mudah dikenali. Solusi yang baik adalah mengubah batas elemen Anda dengan warna yang memiliki kontras yang baik dengan latar belakang:
var color by remember { mutableStateOf(Color.White) } Card( modifier = Modifier .onFocusChanged { color = if (it.isFocused) Red else White } .border(5.dp, color) ) {}
Dalam contoh ini, remember
digunakan untuk menyimpan warna batas di seluruh
rekomposisi, dan garis batas elemen diperbarui setiap kali elemen
mendapatkan atau kehilangan fokus.
Mengimplementasikan isyarat visual lanjutan
Dengan Jetpack Compose, Anda juga dapat membuat isyarat visual yang lebih canggih dan canggih yang lebih cocok dengan UI Anda.
- Pertama, buat
IndicationInstance
yang secara visual menggambar isyarat yang Anda inginkan di UI:private class MyHighlightIndicationInstance(isEnabledState: State<Boolean>) : IndicationInstance { private val isEnabled by isEnabledState override fun ContentDrawScope.drawIndication() { drawContent() if (isEnabled) { drawRect(size = size, color = Color.White, alpha = 0.2f) } } }
- Selanjutnya, buat
Indication
dan ingat status difokuskan:class MyHighlightIndication : Indication { @Composable override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance { val isFocusedState = interactionSource.collectIsFocusedAsState() return remember(interactionSource) { MyHighlightIndicationInstance(isEnabledState = isFocusedState) } } }
- Tambahkan
Indication
danInteractionSource
ke UI, melalui pengubahindication()
:val highlightIndication = remember { MyHighlightIndication() } var interactionSource = remember { MutableInteractionSource() } Card( modifier = Modifier .clickable( interactionSource = interactionSource, indication = highlightIndication, enabled = true, onClick = { } ) ) {}
Memahami status fokus
Umumnya, setiap kali status fokus berubah, FocusEvent
diaktifkan
hierarki, dan induk pengubah focusable()
dapat memprosesnya menggunakan
pengubah onFocusChanged()
.
Jika perlu mengetahui status fokus,Anda dapat menggunakan API ini bersama
pengubah onFocusChanged
:
isFocused
menampilkantrue
jika composable tempat pengubah terpasang difokushasFocus
berfungsi mirip denganisFocused
, tetapi dengan perbedaan substansial: bukan hanya memeriksa yang saat ini, tetapi memeriksa apakah elemen atau salah satu turunannya difokuskanisCaptured
akan menampilkantrue
setiap kali fokus ditahan. Hal ini terjadi, misalnya, saatTextField
berisi data yang salah, sehingga mencoba memfokuskan elemen lain tidak akan menghapus fokus.
Kolom tersebut ditampilkan di bawah ini:
Modifier.onFocusChanged {
val isFocused = it.isFocused
val hasFocus = it.hasFocus
val isCaptured= it.isCaptured
}
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Mengubah perilaku fokus
- Desain Material 2 di Compose
- Menangani input pengguna