الشريحة

مكوّن Chip هو عنصر صغير وتفاعلي في واجهة المستخدم. وتمثّل كيانات معقّدة مثل جهة اتصال أو علامة، وغالبًا ما تتضمّن رمزًا وتصنيفًا. ويمكن أن تكون قابلة للاختيار أو الإغلاق أو النقر.

في ما يلي أنواع الشرائح الأربعة ومواضع استخدامها:

  • المساعدة: يوجّه المستخدم أثناء تنفيذ مهمة. غالبًا ما يظهر كعنصر مؤقت في واجهة المستخدم استجابةً لإدخال المستخدم.
  • الفلترة: تتيح للمستخدمين تحسين المحتوى من خلال مجموعة من الخيارات. ويمكن اختيارها أو إلغاء اختيارها، وقد تتضمّن رمز علامة صح عند اختيارها.
  • الإدخال: يمثّل المعلومات التي يقدّمها المستخدم، مثل الاختيارات في قائمة. ويمكن أن تحتوي على رمز ونص، وتوفّر الرمز X لإزالتها.
  • الاقتراحات: يقدّم اقتراحات للمستخدم استنادًا إلى نشاطه أو إدخالاته الأخيرة. تظهر عادةً أسفل حقل الإدخال لتوجيه المستخدم إلى الإجراءات المطلوبة.
مثال على كل من مكوّنات الشرائح الأربعة، مع إبراز خصائصها الفريدة.
الشكل 1. مكوّنات الشريحة الأربعة

مساحة عرض واجهة برمجة التطبيقات

هناك أربع دوال مركّبة تتوافق مع الأنواع الأربعة من شرائح البيانات. توضّح الأقسام التالية هذه الدوال المركّبة والاختلافات بينها بالتفصيل. ومع ذلك، فإنّها تتشارك المَعلمات التالية:

  • label: السلسلة التي تظهر على الشريحة
  • ‫icon: الرمز المعروض في بداية الشريحة تحتوي بعض الدوال المركّبة المحدّدة على مَعلمة leadingIcon وtrailingIcon منفصلة.
  • ‫onClick: دالة lambda التي تستدعيها الشريحة عندما يضغط عليها المستخدم.

شريحة المساعدة

توفّر الدالة المركّبة AssistChip طريقة سهلة لإنشاء شريحة مساعدة توجّه المستخدم في اتجاه معيّن. ومن الميزات المميّزة لهذه الشريحة هي مَعلمة leadingIcon التي تتيح لك عرض رمز على الجانب الأيمن من الشريحة. يوضّح المثال التالي كيفية تنفيذ ذلك:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                painter = rememberVectorPainter(AppIcons.Settings),
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}

يظهر هذا التنفيذ على النحو التالي.

شريحة مساعدة بسيطة تعرض رمزًا رئيسيًا وتصنيفًا نصيًا
الشكل 2. شريحة المساعدة

شريحة التصفية

تتطلّب الدالة المركّبة FilterChip تتبُّع ما إذا تم اختيار الشريحة أم لا. يوضّح المثال التالي كيفية عرض رمز علامة اختيار في البداية فقط عندما يختار المستخدم الشريحة:

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    painter = rememberVectorPainter(AppIcons.Done),
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}

يظهر هذا التنفيذ على النحو التالي عندما يكون غير محدّد:

شريحة فلتر غير محدّدة، بدون علامة اختيار وخلفية عادية
الشكل 3. شريحة فلتر غير محدّدة

ويظهر على النحو التالي عند اختياره:

شريحة فلتر محدّدة، مع علامة اختيار وخلفية ملوّنة
الشكل 4. شريحة الفلتر المحدّدة

شريحة إدخال

يمكنك استخدام الدالة المركّبة InputChip لإنشاء شرائح تنتج عن تفاعل المستخدم. على سبيل المثال، في برنامج البريد الإلكتروني، عندما يكتب المستخدم رسالة بريد إلكتروني، قد تمثل شريحة الإدخال جهة اتصال أضافها المستخدم إلى حقل "إلى:".

يوضّح التنفيذ التالي شريحة إدخال في حالة اختيار. يغلق المستخدم الشريحة عند الضغط عليها.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                painter = rememberVectorPainter(AppIcons.Person),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                painter = rememberVectorPainter(AppIcons.Close),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}

يظهر هذا التنفيذ على النحو التالي.

شريحة إدخال مع أفاتار ورمز لاحق
الشكل 5. شريحة إدخال

شريحة اقتراح

الدالة المركّبة SuggestionChip هي أبسط الدوال المركّبة المدرَجة في هذه الصفحة، سواء في تعريف واجهة برمجة التطبيقات أو في حالات الاستخدام الشائعة. تعرض شرائح الاقتراحات تلميحات يتم إنشاؤها ديناميكيًا. على سبيل المثال، في تطبيق محادثات مستند إلى الذكاء الاصطناعي، يمكنك استخدام شرائح الاقتراحات لعرض الردود المحتملة على آخر رسالة.

لنفترض أنّك نفّذت SuggestionChip على النحو التالي:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}

يظهر هذا التنفيذ على النحو التالي:

شريحة اقتراح بسيطة
الشكل 6. شريحة اقتراح

شريحة مرتفعة

تستخدم جميع الأمثلة في هذا المستند الدوال المركّبة الأساسية التي تتّخذ مظهرًا مسطّحًا. إذا أردت شريحة ذات مظهر بارز، استخدِم إحدى الدوال البرمجية المركّبة الثلاث التالية:

مراجع إضافية