کارت

Card composable به عنوان یک محفظه طراحی متریال برای رابط کاربری شما عمل می کند. کارت ها معمولاً یک محتوای منسجم را ارائه می دهند. در زیر چند نمونه از مواردی که ممکن است از کارت استفاده کنید آمده است:

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

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

کارتی مرتفع پر از متن و نماد.
شکل 1. نمونه ای از کارت پر شده با متن و نمادها.

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

Card بسیار شبیه سایر کانتینرها در Compose عمل می کند. شما محتوای آن را با فراخوانی سایر اجزای سازنده درون آن اعلام می کنید. به عنوان مثال، در نظر بگیرید که چگونه Card شامل یک تماس به Text در مثال حداقل زیر است:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

پیاده سازی های پیشرفته

مرجع تعریف API 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. نمونه ای از کارت پر شده.

کارت مرتفع

قطعه زیر نحوه پیاده سازی کارت elevated را نشان می دهد. از ElevatedCard اختصاصی composable استفاده کنید.

می توانید از ویژگی elevation برای کنترل ظاهر 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 استفاده کنید. 

@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. نمونه ای از یک کارت مشخص شده.

محدودیت ها

کارت‌ها با پیمایش ذاتی یا رد کردن کنش‌ها ارائه نمی‌شوند، اما می‌توانند در ترکیب‌هایی که این ویژگی‌ها را ارائه می‌دهند، ادغام شوند. به عنوان مثال، برای پیاده سازی Swipe to dismiss روی کارت، آن را با SwipeToDismiss composable ادغام کنید. برای ادغام با اسکرول، از اصلاح کننده های اسکرول مانند verticalScroll استفاده کنید. برای اطلاعات بیشتر به مستندات اسکرول مراجعه کنید.

منابع اضافی