Odaklanmayı kolaylaştırmak için görsel ipuçları kullanın
Materyal Tema'daki odaklanılabilir tüm öğelerin halihazırda bir odak stili varken bir görsel öğeyi teslim etmek için daha kolay fark edilmesini sağlar. Projenin sınırlarını değiştirmek iyi bir çözümdür öğeyi arka planla iyi bir kontrasta sahip bir renkte olacak şekilde değiştirin:
var color by remember { mutableStateOf(Color.White) } Card( modifier = Modifier .onFocusChanged { color = if (it.isFocused) Red else White } .border(5.dp, color) ) {}
Bu örnekte, remember
hücresi, diğer kenarlığın rengini saklamak için kullanılmıştır.
ve öğenin dış çizgisi, öğe her seferinde güncellenir
zaman kaybına uğrar.
Gelişmiş görsel ipuçları uygulayın
Jetpack Compose ile daha sofistike ve gelişmiş görsel oluşturabilirsiniz. daha iyi işaretler.
- İlk olarak, kullanıcı arayüzünde istediğiniz işareti görsel olarak çizen bir
IndicationInstance
oluşturun: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) } } }
- Ardından, bir
Indication
oluşturun ve odaklanılan durumu hatırlayın:class MyHighlightIndication : Indication { @Composable override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance { val isFocusedState = interactionSource.collectIsFocusedAsState() return remember(interactionSource) { MyHighlightIndicationInstance(isEnabledState = isFocusedState) } } }
indication()
değiştiricisini kullanarak kullanıcı arayüzüne hemIndication
hem deInteractionSource
ekleyin:val highlightIndication = remember { MyHighlightIndication() } var interactionSource = remember { MutableInteractionSource() } Card( modifier = Modifier .clickable( interactionSource = interactionSource, indication = highlightIndication, enabled = true, onClick = { } ) ) {}
Odaklanma durumunu anlama
Genellikle, odak durumu her değiştiğinde bir FocusEvent
tetiklenir
ağaç ve focusable()
değiştiricinin üst öğeleri, bu işlevi
onFocusChanged()
değiştiricisi.
Odaklanma durumunu bilmeniz gerekiyorsa bu API'leri birlikte
onFocusChanged
değiştiriciyle:
isFocused
, düzenleyicinin eklendiği composable,true
değerini döndürür. odaklıhasFocus
,isFocused
ile benzer şekilde çalışır ancak önemli bir fark vardır: yalnızca mevcut öğeyi kontrol etmek yerine, ilgili öğenin veya ona ait öğelerden birinin çocuklara odaklanıyorisCaptured
, odak basılı tutulduğundatrue
değerini döndürür. Bu durumTextField
yanlış veri içerdiğinde, dolayısıyla da odaklanmaya çalışırken odaklanmak işe yaramaz.
Bu alanlar aşağıda gösterilmektedir:
Modifier.onFocusChanged {
val isFocused = it.isFocused
val hasFocus = it.hasFocus
val isCaptured= it.isCaptured
}
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Odaklanma davranışını değiştirme
- Compose'da Materyal Tasarım 2
- Kullanıcı girişini işleme