توفير إشارات مرئية لسهولة التركيز على التصور
في حين أن جميع العناصر التي يمكن التركيز عليها من Material Theme لها بالفعل نمط تركيز يطابق الموضوع، قد تحتاج إلى إضافة بعض العناصر المرئية لتسهيل تحديد العنصر الذي يتم التركيز عليه. قد يكون الحل الجيد هو تغيير حد العنصر باللون الذي يحتوي على تباين جيد مع الخلفية:
var color by remember { mutableStateOf(Color.White) } Card( modifier = Modifier .onFocusChanged { color = if (it.isFocused) Red else White } .border(5.dp, color) ) {}
في هذا المثال، يتم استخدام remember
لتخزين لون الحدود عبر عمليات إعادة التكوين، ويتم تحديث مخطط العنصر في كل مرة يكسب فيها العنصر التركيز أو يفقده.
تنفيذ الإشارات البصرية المتقدمة
باستخدام Jetpack Compose، يمكنك أيضًا إنشاء إشارات مرئية أكثر تطورًا وتقدمًا وتتوافق بشكل أفضل مع واجهة المستخدم.
- أولاً، أنشِئ
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) } } }
- بعد ذلك، أنشئ
Indication
وتذكّر حالة التركيز:class MyHighlightIndication : Indication { @Composable override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance { val isFocusedState = interactionSource.collectIsFocusedAsState() return remember(interactionSource) { MyHighlightIndicationInstance(isEnabledState = isFocusedState) } } }
- أضِف كلاً من
Indication
وInteractionSource
إلى واجهة المستخدم من خلال معدِّلindication()
:val highlightIndication = remember { MyHighlightIndication() } var interactionSource = remember { MutableInteractionSource() } Card( modifier = Modifier .clickable( interactionSource = interactionSource, indication = highlightIndication, enabled = true, onClick = { } ) ) {}
فهم حالة التركيز
بشكل عام، في كل مرة تتغيّر فيها حالة التركيز، يتم تنشيط 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
}
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عند إيقاف JavaScript.
- تغيير سلوك التركيز
- Material Design 2 في Compose
- التعامل مع البيانات التي أدخلها المستخدم