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

في كل مرة يتغيّر فيها التركيز في شجرة التركيب، يطلق Compose حدث تركيز يمكن لمعدِّلات العناصر الرئيسية والفرعية ملاحظته. يمكنك استخدام المعدِّل onFocusChanged للاستماع إلى عمليات انتقال حالة التركيز، والاستعلام عن خصائص التركيز الحالية، وتشغيل تحديثات واجهة المستخدم المستندة إلى الحالة.

مراقبة حالة التركيز باستخدام onFocusChanged

يوفّر المُعدِّل onFocusChanged عنصر FocusState عندما يكتسب عنصر ما التركيز أو يفقده.

على سبيل المثال، يمكنك رصد تغييرات التركيز لتعديل حالة المكوّن المخصّص (مثل تغيير لون حدود العنصر أو تشغيل صورة متحركة):

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

في هذا المثال، يخزّن remember لون الحدود في جميع عمليات إعادة التركيب، ويتم تعديل لون الحدود كلما تغيّرت حالة التركيز على العنصر.

سمات FocusState

يوفّر عنصر FocusState الذي تم تمريره إلى onFocusChanged ثلاث سمات رئيسية:

  • ‫isFocused: تعرض true إذا كانت الدالة المركّبة المحدّدة التي تم إرفاق هذا المُعدِّل بها تركّز حاليًا على الإدخال النشط.
  • ‫hasFocus: تعرض القيمة true إذا كان التركيز حاليًا على هذه الدالة المركّبة أو أي من الدوال المركّبة الفرعية التابعة لها. هذا مفيد للحاويات الرئيسية (مثل البطاقات أو أشرطة الأدوات) التي تحتاج إلى معرفة متى يكون أي عنصر فرعي بداخلها نشطًا.
  • ‫isCaptured: تعرض هذه السمة القيمة true إذا كان التركيز مثبَّتًا حاليًا على العنصر (على سبيل المثال، أثناء التفاعلات الفرعية المشروطة باستخدام captureFocus()). أثناء تثبيت التركيز، لا تؤدي محاولة نقل التركيز إلى عناصر أخرى إلى إلغاء التركيز.
Modifier.onFocusChanged { focusState ->
    val isFocused = focusState.isFocused
    val hasFocus = focusState.hasFocus
    val isCaptured = focusState.isCaptured
}
السابق
تحديد حالة التركيز
التالي
طلب التركيز آليًا