الشريحة

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

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

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

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

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

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

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

توفّر المكونات القابلة للتجميع AssistChip طريقة مباشرة لإنشاء chip مساعدة تدفع المستخدم في اتجاه معيّن. ومن الميزات المميزة لهذه الشريحة المَعلمة 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