در Jetpack Compose Glimmer، کامپوننت Card برای گروهبندی و نمایش اطلاعات مرتبط در یک واحد طراحی شده است. کارتها بسیار انعطافپذیر هستند و از ترکیب محتوای اصلی، عناوین و زیرنویسهای اختیاری و آیکونهای ابتدایی یا انتهایی پشتیبانی میکنند. کارتها به طور پیشفرض حداکثر عرض کامل نمایشگر عینک هوش مصنوعی را پر میکنند، قابل فوکوس هستند و همچنین میتوانند قابل کلیک شوند.
آناتومی کارت و اسلاتها
یک کارت Glimmer با قابلیت نوشتن متن در Jetpack از چندین عنصر تخصصی ساخته شده است که به شما امکان میدهد محتوا و طرحبندی آن را سفارشی کنید.
سربرگ : بخش بالایی کارت که برای قرار دادن تصویر طراحی شده است.
عنوان و زیرعنوان : این فیلدهای متنی برچسبهای اصلی و فرعی کارت را ارائه میدهند.
نماد پیشرو : یک نماد اختیاری که در ابتدای قسمت محتوای کارت ظاهر میشود.
آیکن انتهایی : یک آیکن اختیاری که در انتهای قسمت محتوای کارت ظاهر میشود.
اکشن : یک جایگاه برای یک عنصر تعاملی اصلی، مانند یک دکمه. این به کاربران اجازه میدهد تا یک عمل را مستقیماً از کارت انجام دهند. این جایگاه در یک overload جداگانه از Card composable موجود است.
محتوای اصلی : بدنه اصلی کارت، جایی که متن اصلی یا سایر محتوا را قرار میدهید.
مثال پایه: ایجاد یک کارت پایه
شما میتوانید با کد بسیار کمی یک کارت بسیار ساده ایجاد کنید:
Card { Text("This is a card") }
مثال مفصل: نمایش یک کارت پیچیده
کد زیر نحوه استفاده از چندین اسلات را برای ساخت یک کارت نشان میدهد. همچنین نحوه جفت کردن یک Card با TitleChip را نشان میدهد.
@Composable
fun SampleGlimmerCard() {
val myHeaderImage = painterResource(id = R.drawable.header_image)
Column(horizontalAlignment = Alignment.CenterHorizontally) {
TitleChip { Text("Title Chip") }
Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
Card(
action = {
Button(onClick = {}) {
Text("Action Button")
}
},
header = {
Image(
painter = myHeaderImage,
contentDescription = "Header image for the card",
contentScale = ContentScale.FillWidth
)
},
title = { Text("Card Title") },
subtitle = { Text("Card Subtitle") },
leadingIcon = { FavoriteIcon, "Localized description" },
trailingIcon = { FavoriteIcon, "Localized description" }
) {
Text("A Jetpack Compose Glimmer Card using all available slots")
}
}
}
نکات کلیدی در مورد کد
- نحوه استفاده از عناصر مختلف کارت، مانند
header،title،subtitle،leadingIconوaction، را برای سفارشیسازی محتوا و ساختار کارت نشان میدهد. - مثالی از نحوه قرار دادن
TitleChipو استفاده ازSpacerرا نشان میدهد.