Odaklanılan hedefler

Odak hedefi, klavye odağının taşınabileceği bir kullanıcı arayüzü öğesidir. Kullanıcılar, Sekme tuşu veya yön tuşlarıyla klavye odağını taşıyabilir:

• Sekme veya Üst Karakter+Sekme: Odağı tek boyutlu görünüm sırasına göre ileri veya geri taşıyın.
• Yön tuşları: Odağı iki boyutlu olarak hareket ettirin (Yukarı, Aşağı, Sol ve Sağ).

Etkileşimli kullanıcı arayüzü öğeleri varsayılan olarak odaklanma hedefleridir.

Etkileşimli bileşenler varsayılan olarak odak hedefidir. Başka bir deyişle, kullanıcılar dokunabildiği veya tıklayabildiği sürece bir kullanıcı arayüzü öğesi odak hedefidir.

Örneğin, üç Card bileşenini ele alalım. Birinci ve üçüncü kartlar etkileşimliyse (bir onClick geri çağırma işlevi tanımlıyorlarsa) ancak ikinci kart tamamen bilgilendiriciyse (tıklama işleme yoksa) birinci kartta Tab tuşuna basıldığında ikinci kart atlanır ve doğrudan üçüncü karta geçilir.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}
FocusTarget.kt

onClick parametresi sağlayarak ikinci kartı odak hedefi yapabilirsiniz:

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}
FocusTarget.kt

clickable değiştiricisi, özel veya standart kullanıcı arayüzü öğelerini de odak hedeflerine dönüştürür. Ayrıntılı bilgi için Dokunma ve basma başlıklı makaleyi inceleyin.

Uyarı: focusable değiştiricisini ve clickable değiştiricisini aynı anda kullanmayın. İki bağımsız odak hedefi oluşturduğundan yanlış davranışa yol açar.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}
FocusTarget.kt

Bir composable'ı tıklanamayan odak hedefi yapma

focusable değiştiricisi, tıklama semantiği gerektirmeden bir composable'ı odak hedefi yapar. Kullanıcılar klavye odağını değiştirilen composable'a taşıyabilir (örneğin, erişilebilirlik araçlarıyla içeriği incelemek veya görüntü alanını kaydırmak için) ancak Enter veya Boşluk tuşlarına basıldığında tıklama işlemi tetiklenmez:

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}
FocusTarget.kt

Bir composable'ı odaklanılamaz hale getirme

Bazı senaryolarda, etkileşimli bir öğeyi işaretçi veya tıklama etkinliklerini devre dışı bırakmadan klavye navigasyonundan hariç tutmak isteyebilirsiniz. focusProperties değiştiricisinin içine canFocus = false ayarlayarak bir bileşenin odaklanmasını engelleyebilirsiniz:

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)
FocusSnippets.kt