المكوِّن 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") } ) }
تظهر طريقة التنفيذ هذه على النحو التالي:
شريحة بارزة
تستخدم جميع الأمثلة في هذا المستند العناصر الأساسية القابلة للإنشاء التي تتخذ مظهرًا ثابتًا. إذا كنت تريد شريحة ذات مظهر مرتفع، استخدِم أحد العناصر الثلاثة التالية القابلة للإنشاء: