يعمل العنصر القابل للإنشاء Card
كحاوية بتصميم متعدد الأبعاد لواجهة المستخدم.
تقدم البطاقات عادةً جزءًا واحدًا مترابطًا من المحتوى. فيما يلي
إليك بعض الأمثلة على الأماكن التي يمكنك فيها استخدام البطاقة:
- منتج في تطبيق تسوّق.
- قصة إخبارية في تطبيق أخبار.
- رسالة في تطبيق اتصالات
وهي تركّز على تصوير محتوى واحد يميّز
Card
من الحاويات الأخرى. على سبيل المثال، يوفّر Scaffold
بنية عامة.
على الشاشة بأكملها البطاقة بشكل عام عبارة عن عنصر أصغر في واجهة المستخدم داخل مساحة أكبر
تنسيقًا، في حين أن مكوّن التنسيق مثل Column
أو Row
يوفر طريقة أبسط
وواجهة برمجة تطبيقات عامة.
التنفيذ الأساسي
تعمل Card
بشكل مشابه للحاويات الأخرى في Compose. أنت تفصح عن محتواها من خلال
واستدعاء العناصر الأخرى القابلة للإنشاء بداخلها. على سبيل المثال، يمكنك معرفة كيف تحتوي السمة Card
على
باستدعاء Text
في المثال المصغر التالي:
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
عمليات التنفيذ المتقدّمة
اطّلِع على المرجع لتعريف واجهة برمجة التطبيقات Card
. وهي تحدد العديد
تسمح لك بتخصيص مظهر وسلوك
المكون.
في ما يلي بعض المَعلمات الأساسية التي يجب مراعاتها:
elevation
: إضافة ظل إلى العنصر الذي يجعله يظهر عاليًا فوق الخلفية.colors
: يمكنك استخدام النوعCardColors
لضبط اللون التلقائي لكليهما. الحاوية وأي عناصر فرعية.enabled
: في حال ضبطتfalse
لهذه المَعلمة، ستظهر البطاقة على النحو التالي: معطلة ولا تستجيب لإدخال المستخدم.onClick
: لا يقبلCard
عادةً أحداث النقر. وبناءً على ذلك، الحمل الزائد الأساسي الذي ترغب في ملاحظته هو أنه يحدد مَعلمةonClick
. يجب عليك استخدام هذا الحمل الزائد إذا كنت ترغب في تنفيذCard
للاستجابة إلى ضغطات المستخدم.
يوضح المثال التالي كيف يمكنك استخدام هذه المعلمات، أيضًا
مثل المعلمات الأخرى الشائعة مثل shape
وmodifier
.
بطاقة معبأة
في ما يلي مثال على كيفية تنفيذ بطاقة معبأة.
المفتاح هنا هو استخدام السمة colors
لتغيير القيم التي تم ملؤها
اللون.
@Composable fun FilledCardExample() { Card( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surfaceVariant, ), modifier = Modifier .size(width = 240.dp, height = 100.dp) ) { Text( text = "Filled", modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } }
تظهر طريقة التنفيذ هذه على النحو التالي:
![يتم ملء بطاقة بلون خيار السطح من المظهر المتعدد الأبعاد.](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-filled.png?authuser=9&hl=ar)
بطاقة مرتفعة
يوضّح المقتطف التالي كيفية تنفيذ بطاقة مرتفعة. يمكنك استخدام
المخصّص ElevatedCard
القابل للإنشاء.
يمكنك استخدام خاصية elevation
للتحكم في مظهر الارتفاع
الظل الناتج.
@Composable fun ElevatedCardExample() { ElevatedCard( elevation = CardDefaults.cardElevation( defaultElevation = 6.dp ), modifier = Modifier .size(width = 240.dp, height = 100.dp) ) { Text( text = "Elevated", modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } }
تظهر طريقة التنفيذ هذه على النحو التالي:
![تظهر بطاقة فوق خلفية التطبيق مع ظلال.](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-elevated.png?authuser=9&hl=ar)
بطاقة مخطّطة
فيما يلي مثال على بطاقة مميزة. استخدم واجهة برمجة التطبيقات المخصصة
OutlinedCard
قابل للإنشاء.
@Composable fun OutlinedCardExample() { OutlinedCard( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surface, ), border = BorderStroke(1.dp, Color.Black), modifier = Modifier .size(width = 240.dp, height = 100.dp) ) { Text( text = "Outlined", modifier = Modifier .padding(16.dp), textAlign = TextAlign.Center, ) } }
تظهر طريقة التنفيذ هذه على النحو التالي:
![تم تحديد بطاقة بحد أسود رفيع.](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-outlined.png?authuser=9&hl=ar)
القيود
لا تتوفر إجراءات تمرير أو إغلاق مضمّنة للبطاقات، ولكن يمكن دمجها في
عناصر قابلة للإنشاء توفر هذه الميزات. على سبيل المثال، لتطبيق خيار التمرير سريعًا لإغلاق
على بطاقة، يمكنك دمجها مع عنصر SwipeToDismiss
القابل للإنشاء. للدمج
مع ميزة الانتقال للأعلى أو للأسفل، استخدِم أدوات تعديل التمرير، مثل verticalScroll
. انظر التمرير
Google لمزيد من المعلومات.