کارت

ترکیب‌پذیر Card به‌عنوان محتوی «طراحی سه‌بعدی» برای واسط کاربر شما عمل می‌کند. کارت‌ها معمولاً یک قطعه محتوای منسجم را ارائه می‌دهند. مثال‌های زیر نشان می‌دهد که کجا می‌توانید از کارت استفاده کنید:

  • محصولی در برنامه خرید.
  • محتوای خبری در برنامه خبری.
  • پیامی در برنامه ارتباطات.

تمرکز بر نمایش یک محتوای واحد است که آن را از سایر محفظه‌ها متمایز می‌کند Card. برای مثال، Scaffold ساختار کلی برای کل صفحه‌نمایش ارائه می‌دهد. کارت معمولاً عنصر رابط کاربری کوچک‌تری در چیدمان بزرگ‌تر است، درحالی‌که عنصر چیدمانی مثل Column یا Row میانای برنامه‌سازی کاربردی ساده‌تر و عمومی‌تری ارائه می‌دهد.

کارتی برجسته که با نوشتار و نمادها پر شده است.
شکل ۱. نمونه‌ای از کارت که با نوشتار و نمادها تکمیل شده است.

پیاده‌سازی پایه

Card بسیار شبیه به دیگر محتوی‌ها در «نوشتن» عمل می‌کند. با فراخوانی دیگر عناصر ترکیبی در آن، محتوایش را اعلام می‌کنید. برای مثال، درنظر بگیرید که 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,
        )
    }
}

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

کارت با رنگ گونه سطح از زمینه Material پر می‌شود.
شکل ۲. نمونه‌ای از کارت تکمیل‌شده.

کارت برجسته

تکه‌کد زیر نحوه پیاده‌سازی کارت برجسته را نشان می‌دهد. از ترکیب‌پذیر اختصاصی 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 استفاده کنید. برای اطلاعات بیشتر، به اسناد پیمایش مراجعه کنید.

منابع بیشتر