بطاقة

يعمل العنصر القابل للإنشاء 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. انظر التمرير Google لمزيد من المعلومات.

مصادر إضافية