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

دستگاه‌های XR قابل اجرا

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

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

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

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

آناتومی و اسلات‌ها

یک کارت Glimmer با قابلیت نوشتن متن در Jetpack از چندین عنصر تخصصی ساخته شده است که به شما امکان می‌دهد محتوا و طرح‌بندی آن را سفارشی کنید.

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

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

• عرض : کارت‌ها حداکثر عرض موجود صفحه نمایش را پر می‌کنند تا خوانایی روی عینک‌های نمایشگر بهینه شود.
• حداقل ارتفاع : 80.dp
• فاصله عمودی متن : 3.dp
• شکل هدر : از RoundedCornerShape با گوشه‌های 24.dp استفاده می‌کند.
• مقدار پیش‌فرض برای فاصله‌گذاری محتوا (Content padding ): 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") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    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") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    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