التفاعل مع التركيز

توفير إشارات مرئية لسهولة التركيز على التصور

في حين أن جميع العناصر التي يمكن التركيز عليها من Material Theme لها بالفعل نمط تركيز يطابق الموضوع، قد تحتاج إلى إضافة بعض العناصر المرئية لتسهيل تحديد العنصر الذي يتم التركيز عليه. قد يكون الحل الجيد هو تغيير حد العنصر باللون الذي يحتوي على تباين جيد مع الخلفية:

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}
FocusSnippets.kt

في هذا المثال، يتم استخدام remember لتخزين لون الحدود عبر عمليات إعادة التكوين، ويتم تحديث مخطط العنصر في كل مرة يكسب فيها العنصر التركيز أو يفقده.

تنفيذ الإشارات البصرية المتقدمة

باستخدام Jetpack Compose، يمكنك أيضًا إنشاء إشارات مرئية أكثر تطورًا وتقدمًا وتتوافق بشكل أفضل مع واجهة المستخدم.

1. أولاً، أنشِئ IndicationInstance يرسم التلميح المرئي في واجهة المستخدم:

   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)
           }
       }
   }
   FocusSnippets.kt

2. بعد ذلك، أنشئ Indication وتذكّر حالة التركيز:

   class MyHighlightIndication : Indication {
       @Composable
       override fun rememberUpdatedInstance(interactionSource: InteractionSource):
           IndicationInstance {
           val isFocusedState = interactionSource.collectIsFocusedAsState()
           return remember(interactionSource) {
               MyHighlightIndicationInstance(isEnabledState = isFocusedState)
           }
       }
   }
   FocusSnippets.kt

3. أضِف كلاً من Indication وInteractionSource إلى واجهة المستخدم من خلال معدِّل indication():

   val highlightIndication = remember { MyHighlightIndication() }
   var interactionSource = remember { MutableInteractionSource() }
   
   Card(
       modifier = Modifier
           .clickable(
               interactionSource = interactionSource,
               indication = highlightIndication,
               enabled = true,
               onClick = { }
           )
   ) {}
   FocusSnippets.kt

فهم حالة التركيز

بشكل عام، في كل مرة تتغيّر فيها حالة التركيز، يتم تنشيط FocusEvent في الشجرة ويمكن للوالدَين الاستماع إلى مفتاح التعديل focusable() باستخدام المعدِّل onFocusChanged().

إذا كنت بحاجة إلى معرفة حالة التركيز، يمكنك استخدام واجهات برمجة التطبيقات هذه جنبًا إلى جنب مع معدِّل onFocusChanged:

• تعرض isFocused القيمة true إذا كان العنصر الذي يتم ربط المعدِّل به يركز
• تعمل السمة hasFocus بالطريقة نفسها التي يعمل بها isFocused، ولكن مع وجود فرق جوهري: بدلاً من التحقّق من العنصر الحالي فقط، فإنّها تتحقّق مما إذا كان العنصر أو أحد عناصرها التابعة تركّز على العنصر.
• تعرض الدالة isCaptured القيمة true عند الاحتفاظ بالتركيز. ويحدث ذلك مثلاً عندما يحتوي TextField على بيانات غير صحيحة، وبالتالي لن تؤدي محاولة تركيز عناصر أخرى إلى توضيح التركيز.

يتم عرض هذه الحقول في ما يلي:

Modifier.onFocusChanged {
    val isFocused = it.isFocused
    val hasFocus = it.hasFocus
    val isCaptured= it.isCaptured
}