کارت

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

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

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

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

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

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

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

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

برای تعریف میانای برنامه‌سازی کاربردی Card، مرجع را ببینید. این عنصر چندین پارامتر را تعریف می‌کند که به شما امکان می‌دهد ظاهر و رفتار مؤلفه را سفارشی‌سازی کنید.

برخی‌از پارامترهای کلیدی که باید به آن‌ها توجه کنید عبارت‌اند از:

  • elevation: سایه‌ای به مؤلفه اضافه می‌کند که باعث می‌شود بالاتر از پس‌زمینه به‌نظر برسد.
  • colors: از نوع CardColors برای تنظیم رنگ پیش‌فرض هم محفظه و هم فرزندان استفاده می‌کند.
  • enabled: اگر false را برای این پارامتر ارسال کنید، کارت به‌صورت غیرفعال نشان داده می‌شود و به ورودی کاربر پاسخ نمی‌دهد.
  • onClick: معمولاً Card رویدادهای کلیک را نمی‌پذیرد. As such, the primary overload you would like to note is that which defines an onClick parameter. اگر می‌خواهید پیاده‌سازی 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 استفاده کنید. برای اطلاعات بیشتر، به اسناد Scroll مراجعه کنید.

منابع بیشتر