الشريحة

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

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

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

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

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

  • 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

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

شريحة مساعدة بسيطة
الشكل 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(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

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

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

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

شريحة إدخال تتضمّن صورة رمزية ورمزًا متبوعًا
الشكل 5. أدخِل الشريحة.

شريحة اقتراح

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

راجِع عملية تنفيذ SuggestionChip التالية:

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

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

شريحة مساعدة بسيطة.
الشكل 6. شريحة المساعدة

شريحة بارزة

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

مصادر إضافية