الشريحة

المكوّن 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)
            )
        }
    )
}
Chip.kt

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

شريحة مساعدة بسيطة تعرض رمزًا رئيسيًا وتسمية نصية.
الشكل 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
        },
    )
}
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. شريحة اقتراح

شريحة بارزة

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

مراجع إضافية