الشريحة

المكوّن 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. شريحة اقتراح

شريحة بارزة

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

مراجع إضافية