کارت‌ها در Jetpack Compose Glimmer

دستگاه‌های XR قابل‌اعمال

این راهنمایی به شما کمک می‌کند برای این نوع دستگاه‌های واقعیت گسترده تجربه بسازید.

آشنایی با انواع دستگاه‌های XR →

آشنایی با انواع دستگاه‌های XR →

در Jetpack Compose Glimmer، عنصر Card به‌عنوان ظرف اصلی برای محتوای مرتبط عمل می‌کند و مرز بصری واضحی برای واحدهای اطلاعات قابل‌هضم ایجاد می‌کند. کارت‌ها بسیار تطبیق‌پذیر هستند و از ترکیب‌های محتوای اصلی، عنوان‌های اختیاری، زیرنویس‌ها، و نمادهای پیشرو یا دنباله‌دار پشتیبانی می‌کنند. کارت‌ها به‌طور پیش‌فرض حداکثر عرض دردسترس را پر می‌کنند، قابل‌تمرکز هستند، و همچنین می‌توانید آن‌ها را کلیک‌کردنی کنید. کارت‌ها از چیدمان عمودی پشتیبانی می‌کنند که در آن تصویر سرصفحه در بالا قرار می‌گیرد و پس‌از آن عنوان، زیرعنوان، و محتوای اصلی قرار می‌گیرد.

کارت‌ها براساس سیستم سطح Jetpack Compose Glimmer ساخته شده‌اند، بنابراین ویژگی‌های فیزیکی مثل جلوه‌های عمق، برش، و حاشیه‌های یکپارچه برجسته را به‌ارث می‌برند.

آناتومی و جایگاه‌ها

«کارت درخشان Jetpack Compose» از چندین عنصر تخصصی ساخته شده است که به شما امکان می‌دهد محتوا و چیدمان آن را سفارشی‌سازی کنید.

پیش‌فرض‌های کارت

پیش‌فرض‌های زیر برای کارت‌ها اعمال می‌شود:

• عرض: کارت‌ها حداکثر عرض دردسترس نمایشگر را پر می‌کنند تا خوانایی در عینک‌های نمایشگر بهینه شود.
• حداقل ارتفاع: 80.dp
• فاصله عمودی نوشتار: 3.dp
• شکل سرصفحه: از RoundedCornerShape با 24.dp گوشه استفاده می‌کند
• حاشیه محتوا: به‌طور پیش‌فرض روی GlimmerTheme.componentSpacingValues.medium تنظیم می‌شود. این کار بر بیرونی‌ترین حاشیه اطراف تصاویر سرایند و محتوی محتوا تأثیر می‌گذارد.
• شکل: به‌طور پیش‌فرض روی GlimmerTheme.shapes.medium تنظیم می‌شود.

• پرداز نوشتار: از مقادیر پیش‌فرض از GlimmerTheme.typography برای جایگاه‌های زیر استفاده می‌کند:

  • عنوان: bodyMedium
  • زیرنویس: caption
  • محتوای اصلی: bodySmall

مثال: کارت پایه

کد زیر حداقل کد لازم برای ساختن کارت را نشان می‌دهد:

Card { Text("This is a card") }
CardSamples.kt

مثال: کارت با چند جایگاه

کد زیر نشان می‌دهد که چگونه از چند جایگاه با هم برای ساختن کارت استفاده کنید:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") }
) {
    Text("This is a complete card")
}
CardSamples.kt

نکات کلیدی درباره کد

• نشان می‌دهد چگونه از عناصر مختلف کارت، مانند title، subtitle، و leadingIcon، برای سفارشی‌سازی محتوا و ساختار کارت استفاده کنید.
• از Card سرریز با onClick برای تعاملی کردن کل کارت سطح استفاده می‌کند.

کارت‌های اقدام

اگر می‌خواهید دکمه کنش را با کارت اضافه کنید، از ActionCard استفاده کنید. کارت‌های کنش همان عناصر کارت‌های استاندارد را دارند و همچنین شامل پارامتر اضافی action است که دکمه پایین را تعریف می‌کند.

مثال: کارت کنش پایه

این کد نحوه ایجاد ActionCard را نشان می‌دهد:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}
CardSamples.kt

مثال: کارت کنش با نماد

این کد نشان می‌دهد که چگونه ActionCard پیچیده‌تری با نمادها ایجاد کنید:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}
CardSamples.kt