Odaklanma durumunu belirtme

Odaklanılmış durum, kullanıcıların hangi kullanıcı arayüzü öğesinin giriş odağına sahip olduğunu anlamasına yardımcı olacak net bir görsel ipucu sağlar. Tüm etkileşimli Material 3 bileşenleri, varsayılan olarak yerleşik odak göstergeleri sağlar.

Not: Bu kılavuzda, görsel odaklanma göstergelerinin nasıl çizileceği açıklanmaktadır. Odak geçişlerini programatik olarak dinlemek, odak işaretlerini (isFocused, hasFocus, isCaptured) sorgulamak veya duruma dayalı kullanıcı arayüzü değişikliklerini tetiklemek için Odaklanmaya tepki verme başlıklı makaleyi inceleyin.

Material tema odak göstergesi

Materyal bileşenleri, görsel durum değişikliklerini çizmek için ripple işlevini ve LocalIndication kullanır. Özel bir bileşene standart Material odak geri bildirimi eklemek için:

1. remember { MutableInteractionSource() } kullanarak MutableInteractionSource oluşturun.
2. Etkileşim kaynağını indication değiştiricisine ripple() ile birlikte iletin.

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}
FocusedState.kt

Özel odak göstergeleri uygulama

Özel görsel ipuçları (ör. ölçeklendirme, kenarlıklar veya parlaklık efektleri) için:

1. IndicationNodeFactory oluşturun.
2. Öğenin InteractionSource tarafından yayılan odak etkileşimlerini gözlemleyin.
3. indication değiştiricisini kullanarak özel göstergeyi uygulayın.

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}
FocusSnippets.kt