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

في كل مرة يتغير فيها التركيز في شجرة التركيب، يطلق 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)
) {}
FocusSnippets.kt

في هذا المثال، يخزّن 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
}