الشريحة

المكوِّن 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. شريحة المساعدة

شريحة الفلتر

تتطلّب منك عناصر 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. شريحة المساعدة

شريحة بارزة

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

مصادر إضافية