الشريحة

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

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

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

واجهة برمجة التطبيقات

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

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

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

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

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

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

شريحة الفلتر

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

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

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

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

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

شريحة الإدخال

يمكنك استخدام العنصر المركّب 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(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

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

شريحة الاقتراح

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

إليك تنفيذ SuggestionChip:

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

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

شريحة بارزة

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

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

مراجع إضافية

• مستندات واجهة مستخدم Material