در 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") }
نکات کلیدی در مورد کد
- نحوه استفاده از عناصر مختلف کارت، مانند
title،subtitleوleadingIcon، را برای سفارشیسازی محتوا و ساختار کارت نشان میدهد. - از سربارگذاری
Cardبه همراهonClickبرای تعاملی کردن کل سطح کارت استفاده میکند.