تحديد حالة التركيز

يوفّر وضع التركيز إشارة مرئية واضحة لمساعدة المستخدمين في فهم عنصر واجهة المستخدم الذي يركّز عليه الإدخال حاليًا. توفّر جميع مكوّنات Material 3 التفاعلية مؤشرات تركيز مضمّنة تلقائيًا.

مؤشر التركيز في تخصيص التصميم المتعدد الأبعاد

تستخدم مكوّنات Material الدالة ripple وLocalIndication لرسم تغييرات الحالة المرئية. لإرفاق ملاحظات التركيز العادية في Material بمكوّن مخصّص:

  1. أنشئ MutableInteractionSource باستخدام remember { MutableInteractionSource() }.
  2. مرِّر مصدر التفاعل إلى المُعدِّل indication، إلى جانب ripple().

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}

تنفيذ مؤشرات التركيز المخصّصة

بالنسبة إلى الإشارات المرئية المخصّصة (مثل تغيير الحجم أو الحدود أو تأثيرات التوهج):

  1. أنشئ IndicationNodeFactory.
  2. مراقبة تفاعلات التركيز التي يصدرها العنصر InteractionSource.
  3. طبِّق المؤشر المخصّص باستخدام المُعدِّل indication.

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}

السابق
استعادة التركيز
التالي
التفاعل مع التركيز