بطاقة

يعمل العنصر القابل للإنشاء Card كحاوية بتصميم متعدد الأبعاد لواجهة المستخدم. تقدم البطاقات عادةً جزءًا واحدًا مترابطًا من المحتوى. وفيما يلي بعض الأمثلة على الأماكن التي يمكنك فيها استخدام البطاقة:

  • منتج في تطبيق تسوّق.
  • قصة إخبارية في تطبيق أخبار.
  • رسالة في تطبيق اتصالات

وهي تركّز على تصوير محتوى واحد يميّز Card عن الحاويات الأخرى. على سبيل المثال، يوفّر Scaffold بنية عامة للشاشة بأكملها. تكون البطاقة بشكل عام عبارة عن عنصر أصغر في واجهة المستخدم داخل تنسيق أكبر، في حين يوفر مكوّن التنسيق مثل Column أو Row واجهة برمجة تطبيقات أبسط وأكثر عمومية.

بطاقة مرتفعة مليئة بالنصوص والرموز
الشكل 1. مثال على بطاقة مليئة بنص ورموز:

التنفيذ الأساسي

تعمل 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

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

يتم ملء بطاقة بلون خيار السطح من المظهر المتعدد الأبعاد.
الشكل 2. مثال على بطاقة معبّأة.

بطاقة مرتفعة

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

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

تظهر بطاقة فوق خلفية التطبيق مع ظلال.
الشكل 3. مثال على بطاقة مرتفعة.

بطاقة مخطّطة

فيما يلي مثال على بطاقة مميزة. استخدِم مربّع 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

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

تم تحديد بطاقة بحد أسود رفيع.
الشكل 4. مثال على بطاقة موضّحة.

القيود

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

مصادر إضافية