Görselleştirmeyi kolaylaştırmak için görsel ipuçları sağlayın
Materyal Tema'daki tüm odaklanılabilir öğeler zaten temayla eşleşen bir odak stiline sahip olsa da, odaklanan öğenin daha kolay fark edilmesini sağlamak için bazı görsel öğeler eklemeniz gerekebilir. Öğenizin kenarlığını, arka planla kontrastı iyi olan bir renkle değiştirmek iyi bir çözüm olabilir:
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
, yeniden bestelerde kenarlığın rengini saklamak için kullanılır ve öğenin ana hatları, öğe her odaklandığında veya kaybolduğunda güncellenir.
Gelişmiş görsel işaretler uygulayın
Jetpack Compose ile kullanıcı arayüzünüze daha uygun olan daha sofistike ve gelişmiş görsel işaretler de oluşturabilirsiniz.
- Öncelikle, kullanıcı arayüzünde istediğiniz ipucunu 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ştiriciyle 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, odağın bir durumu her değiştiğinde, ağaçta bir FocusEvent
tetiklenir ve focusable()
değiştiricisinin üst öğeleri onFocusChanged()
değiştiricisini kullanarak bunu dinleyebilir.
Odağın durumunu bilmeniz gerekiyorsa bu API'leri onFocusChanged
değiştiricisiyle birlikte kullanabilirsiniz:
isFocused
, değiştiricinin eklendiği besteye odaklanmışsatrue
değerini döndürürhasFocus
,isFocused
ile benzer şekilde çalışır, ancak arada önemli bir fark vardır. Yalnızca geçerlini kontrol etmek yerine, öğenin veya alt öğelerinden birinin odaklanıp odaklanmadığını kontrol eder.isCaptured
, odak tutulduğundatrue
değerini döndürür. Bu durum, örneğin birTextField
yanlış veri içerdiğinde, diğer öğelere odaklanmaya çalışıldığında odağın temizlenmemesi meydana gelir.
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: Bağlantı metni JavaScript kapalıyken gösterilir
- Odaklanma davranışını değiştirme
- Oluşturma'da Materyal Tasarım 2
- Kullanıcı girişini işleme