المكوِّن Chip
هو عنصر مدمج وتفاعلي في واجهة المستخدم. إنه يمثل عناصر معقدة مثل جهة اتصال
أو علامة، غالبًا مع أيقونة وتسمية. يمكن أن يكون قابلاً
للتحقق أو يمكن إغلاقه أو النقر عليه.
الأنواع الأربعة من رقائق البطاطس والأماكن التي يمكنك استخدامها هي كما يلي:
- المساعدة: توجّه المستخدِم أثناء أداء مهمّة ما. غالبًا ما تظهر كعنصر مؤقت لواجهة المستخدم استجابةً لإدخال المستخدم.
- فلترة: تسمح للمستخدمين بتحسين المحتوى من مجموعة من الخيارات. ويمكن تحديدها أو إلغاء اختيارها، وقد تحتوي على رمز علامة اختيار عند تحديدها.
- الإدخال: يمثل المعلومات المقدّمة من المستخدم، مثل الاختيارات في إحدى القوائم. ويمكن أن تحتوي هذه الإعلانات على رمز ونصّ، كما يمكن أن تقدّم علامة "X" لإزالتها.
- اقتراح: يتم تقديم اقتراحات إلى المستخدم بناءً على أحدث نشاط أو إدخال. تظهر عادةً أسفل حقل الإدخال للمطالبة بإجراءات المستخدم.
مساحة عرض واجهة برمجة التطبيقات
تتوفّر أربعة عناصر قابلة للإنشاء تتوافق مع الأنواع الأربعة من رقائق البطاطس. توضّح الأقسام التالية هذه العناصر القابلة للإنشاء والاختلافات بينها بالتفصيل. ومع ذلك، يتشاركان المعلَمات التالية:
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) ) } ) }
وتظهر عملية التنفيذ هذه على النحو التالي.
شريحة الفلتر
تتطلّب منك شريحة 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 }, ) }
وتظهر عملية التنفيذ هذه على النحو التالي عند عدم اختيارها:
ويظهر على النحو التالي عند تحديده:
شريحة إدخال
يمكنك استخدام عنصر 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) ) }, ) }
وتظهر عملية التنفيذ هذه على النحو التالي.
شريحة الاقتراح
إنّ عنصر SuggestionChip
القابل للإنشاء هو أبسط العناصر القابلة للإنشاء المُدرَجة
في هذه الصفحة، سواء في تعريف واجهة برمجة التطبيقات أو في حالات الاستخدام الشائعة. تقدم شرائح الاقتراحات تلميحات يتم إنشاؤها ديناميكيًا. على سبيل المثال، في تطبيق دردشة مستند إلى الذكاء الاصطناعي، يمكنك استخدام شرائح الاقتراحات لتقديم الردود المحتملة على أحدث رسالة.
ننصحك باستخدام طريقة تنفيذ SuggestionChip
هذه:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
وتظهر عملية التنفيذ هذه على النحو التالي:
شريحة مرتفعة
تستخدم جميع الأمثلة في هذا المستند العناصر الأساسية القابلة للإنشاء التي تأخذ مظهرًا مسطحًا. إذا كنت تريد شريحة ذات مظهر مرتفع، استخدِم إحدى العناصر الثلاثة التالية للإنشاء: