بطاقة

يعمل العنصر القابل للإنشاء 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,
        )
    }
}
Card.kt

تظهر طريقة التنفيذ هذه على النحو التالي:

بطاقة مرتفعة

يوضّح المقتطف التالي كيفية تنفيذ بطاقة مرتفعة. يمكنك استخدام المخصّص 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,
        )
    }
}
Card.kt

تظهر طريقة التنفيذ هذه على النحو التالي:

بطاقة مخطّطة

فيما يلي مثال على بطاقة مميزة. استخدم واجهة برمجة التطبيقات المخصصة 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,
        )
    }
}
Card.kt

تظهر طريقة التنفيذ هذه على النحو التالي:

القيود

لا تتضمّن البطاقات إجراءات التمرير أو الإغلاق، ولكن يمكن دمجها في عناصر قابلة للتجميع تتضمّن هذه الميزات. على سبيل المثال، لتطبيق خيار التمرير سريعًا لإغلاق على بطاقة، يمكنك دمجها مع عنصر SwipeToDismiss القابل للإنشاء. للدمج مع ميزة الانتقال للأعلى أو للأسفل، استخدِم أدوات تعديل التمرير، مثل verticalScroll. انظر التمرير Google لمزيد من المعلومات.

مصادر إضافية

• مستندات واجهة Material UI