Odaklanma durumunu belirtme

Odaklanmış durum, kullanıcıların o anda hangi kullanıcı arayüzü öğesinin giriş odağına sahip olduğunu anlamasına yardımcı olan 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 odak 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 Odağa tepki verme başlıklı makaleyi inceleyin.

Materyal Teması Oluşturma odak göstergesi

Materyal bileşenleri, görsel durum değişikliklerini çizmek için ripple işlevini ve LocalIndication öğesini kullanır. Standart Material odaklanma geri bildirimini özel bir bileşene eklemek için:

1. remember { MutableInteractionSource() } kullanarak MutableInteractionSource oluşturun.
2. Etkileşim kaynağını ripple() ile birlikte indication değiştiricisine 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 parlama efektleri) için:

1. IndicationNodeFactory oluşturun.
2. Öğenin InteractionSource tarafından yayınlanan 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