الشريحة

المكوّن 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(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}

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

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

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

يتطلّب العنصر القابل للإنشاء 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
        },
    )
}

يظهر عنصر التنفيذ هذا على النحو التالي عند إلغاء اختياره:

شريحة فلتر غير محدّدة، بدون علامة اختيار وخلفية عادية
الشكل 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)
            )
        },
    )
}

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

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

شريحة اقتراح

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

إليك طريقة تنفيذ SuggestionChip:

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

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

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

شريحة بارزة

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

مراجع إضافية