المكوِّن 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) ) } ) }
تظهر طريقة التنفيذ هذه على النحو التالي.
![شريحة مساعدة بسيطة.](https://developer.android.com/static/develop/ui/compose/images/components/chip-assist.png?authuser=2&hl=ar)
شريحة الفلتر
يتطلّب منك رمز 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 }, ) }
تظهر طريقة التنفيذ هذه على النحو التالي عند إلغاء اختيارها:
![شريحة فلتر لم يتم اختيارها، بدون عملية تحقّق وخلفية الخطة.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter.png?authuser=2&hl=ar)
وتظهر على النحو التالي عند اختيارها:
![تم اختيار شريحة فلتر مع علامة اختيار وخلفية ملوّنة.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=2&hl=ar)
شريحة الإدخال
يمكنك استخدام العنصر 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) ) }, ) }
تظهر طريقة التنفيذ هذه على النحو التالي.
![شريحة إدخال تحتوي على صورة رمزية ورمز لاحق](https://developer.android.com/static/develop/ui/compose/images/components/chip-input.png?authuser=2&hl=ar)
شريحة الاقتراح
عنصر SuggestionChip
القابل للإنشاء هو الأكثر أساسية من بين المواد القابلة للإنشاء المدرَجة.
في هذه الصفحة، سواء في تعريف واجهة برمجة التطبيقات أو حالات الاستخدام الشائعة. الاقتراح
تقدّم الشرائح تلميحات تم إنشاؤها ديناميكيًا. على سبيل المثال، في تطبيق دردشة مستند إلى الذكاء الاصطناعي،
شرائح الاقتراحات لتقديم الردود المحتملة على أحدث
.
ننصحك باستخدام SuggestionChip
:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
تظهر طريقة التنفيذ هذه على النحو التالي:
![شريحة مساعدة بسيطة.](https://developer.android.com/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=2&hl=ar)
شريحة بارزة
تستخدم جميع الأمثلة الواردة في هذا المستند العناصر الأساسية القابلة للإنشاء التي تتخذ مظهرك. إذا كنت تريد الحصول على شريحة ذات مظهر مرتفع، استخدِم أحد العناصر الثلاثة التالية: