জেটপ্যাক কম্পোজ গ্লিমারে, Card কম্পোনেন্টটি একক ইউনিটে সম্পর্কিত তথ্য গোষ্ঠীবদ্ধ এবং প্রদর্শন করার জন্য ডিজাইন করা হয়েছে। কার্ডগুলি অত্যন্ত অভিযোজিত, প্রধান বিষয়বস্তু, ঐচ্ছিক শিরোনাম এবং সাবটাইটেল এবং লিডিং বা ট্রেলিং আইকনগুলির সমন্বয় সমর্থন করে। কার্ডগুলি ডিফল্টরূপে AI চশমা প্রদর্শনের সর্বাধিক পূর্ণ প্রস্থ পূরণ করে, ফোকাসযোগ্য এবং ক্লিকযোগ্যও করা যেতে পারে।
কার্ড অ্যানাটমি এবং স্লট
একটি জেটপ্যাক কম্পোজ গ্লিমার কার্ড বেশ কয়েকটি বিশেষ উপাদান দিয়ে তৈরি, যা আপনাকে এর বিষয়বস্তু এবং বিন্যাস কাস্টমাইজ করতে দেয়।
হেডার : কার্ডের উপরের অংশ, একটি ছবি ধরে রাখার জন্য ডিজাইন করা হয়েছে।
শিরোনাম এবং উপশিরোনাম : এই পাঠ্য ক্ষেত্রগুলি কার্ডের জন্য প্রধান এবং গৌণ লেবেল প্রদান করে।
লিডিং আইকন : একটি ঐচ্ছিক আইকন যা কার্ডের কন্টেন্ট এরিয়ার শুরুতে প্রদর্শিত হয়।
ট্রেইলিং আইকন : একটি ঐচ্ছিক আইকন যা কার্ডের কন্টেন্ট এরিয়ার শেষে প্রদর্শিত হয়।
অ্যাকশন : একটি প্রাথমিক ইন্টারেক্টিভ উপাদানের জন্য একটি স্লট, যেমন একটি বোতাম। এটি ব্যবহারকারীদের সরাসরি কার্ড থেকে একটি ক্রিয়া সম্পাদন করতে দেয়। স্লটটি কার্ড কম্পোজেবলের একটি পৃথক ওভারলোডে উপলব্ধ।
মূল বিষয়বস্তু : কার্ডের মূল অংশ, যেখানে আপনি প্রাথমিক পাঠ্য বা অন্যান্য বিষয়বস্তু রাখেন।
মৌলিক উদাহরণ: একটি মৌলিক কার্ড তৈরি করুন
আপনি খুব কম কোড দিয়ে একটি খুব সাধারণ কার্ড তৈরি করতে পারেন:
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ব্যবহার করার একটি উদাহরণ দেখায়।