الاستهدافات التي تركّز عليها

هدف التركيز هو عنصر في واجهة المستخدم يمكن أن ينتقل إليه تركيز لوحة المفاتيح. يمكن للمستخدمين نقل تركيز لوحة المفاتيح باستخدام مفتاح Tab أو مفاتيح الاتجاهات (الأسهم):

• مفتاح Tab أو Shift+Tab: لنقل التركيز للأمام أو للخلف بترتيب ظهور أحادي البُعد
• مفاتيح الاتجاهات: تنقل التركيز في بُعدَين (للأعلى وللأسفل ولليمين ولليسار).

عناصر واجهة المستخدم التفاعلية هي أهداف التركيز تلقائيًا

يكون المكوّن التفاعلي هدفًا للتركيز تلقائيًا. بعبارة أخرى، يكون عنصر واجهة المستخدم هدفًا للتركيز إذا كان بإمكان المستخدمين النقر عليه.

على سبيل المثال، لنفترض أنّ لدينا ثلاثة مكوّنات بطاقة. إذا كانت البطاقتان الأولى والثالثة تفاعليتين (تحدّدان دالة ردّ اتصال onClick)، ولكن البطاقة الثانية مخصّصة فقط لعرض المعلومات (لا تتضمّن معالجة للنقرات)، يؤدي الضغط على مفتاح Tab في البطاقة الأولى إلى تخطّي البطاقة الثانية والانتقال مباشرةً إلى البطاقة الثالثة.

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:

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

يؤدي المُعدِّل clickable أيضًا إلى تحويل عناصر في واجهة المستخدم المخصّصة أو العادية إلى أهداف تركيز. يُرجى الرجوع إلى قسم النقر والضغط للحصول على التفاصيل.

تحذير: لا تستخدِم المُعدِّل focusable والمُعدِّل clickable في الوقت نفسه. ويؤدي ذلك إلى سلوك غير صحيح لأنّه ينشئ هدفَين مستقلَّين للتركيز.

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

جعل دالة مركّبة هدف تركيز غير قابل للنقر

يؤدي المُعدِّل focusable إلى جعل الدالة المركّبة هدفًا للتركيز بدون الحاجة إلى دلالات النقر. يمكن للمستخدمين نقل تركيز لوحة المفاتيح إلى الدالة المركّبة المعدَّلة (على سبيل المثال، لفحص المحتوى باستخدام أدوات تسهيل الاستخدام أو الانتقال في إطار العرض)، ولكن الضغط على مفتاحَي Enter أو مفتاح المسافة لا يؤدي إلى تفعيل إجراء النقر:

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

جعل دالة مركّبة غير قابلة للتركيز

في بعض السيناريوهات، قد تحتاج إلى استبعاد عنصر تفاعلي من التنقل باستخدام لوحة المفاتيح بدون إيقاف أحداث المؤشر أو النقر. يمكنك منع مكوّن من تلقّي التركيز من خلال ضبط canFocus = false داخل المعدِّل focusProperties:

var checked by remember { mutableStateOf(false) }

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