کارت‌ها در 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

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

کد زیر یک کارت پایه ایجاد می‌کند:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}
CardSamples.kt

مثال: کارت پیچیده با چندین اسلات

کد زیر نحوه استفاده از چندین اسلات را با هم برای ساخت یک کارت نشان می‌دهد.

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}
CardSamples.kt

نکات کلیدی در مورد کد

• نحوه استفاده از عناصر مختلف کارت، مانند header ، title ، leadingIcon و action ، را برای سفارشی‌سازی محتوا و ساختار کارت نشان می‌دهد.
• از بارگذاری استاندارد Card به همراه یک عمل استفاده می‌کند، زیرا فقط کارت (یا عمل داخلی آن) باید قابل فوکوس باشد. اگر نیاز دارید که کل سطح کارت تعاملی باشد، به جای آن از بارگذاری Card به همراه onClick استفاده کنید.
• این کارت از یک اسلات اکشن استفاده می‌کند، بنابراین سطح کارت قابل فوکوس نیست و در عوض فوکوس به دکمه اکشن هدایت می‌شود.