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

تقدّم حالة التركيز إشارة مرئية واضحة لمساعدة المستخدمين في معرفة عنصر واجهة المستخدم الذي يتم التركيز عليه حاليًا. توفّر جميع عناصر 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")
}

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