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