জেটপ্যাক কম্পোজ গ্লিমারে কার্ড

প্রযোজ্য এক্সআর ডিভাইস

এই নির্দেশিকা আপনাকে এই ধরনের এক্সআর ডিভাইসগুলির জন্য অভিজ্ঞতা তৈরি করতে সাহায্য করে।

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

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

কার্ডগুলো Jetpack Compose Glimmer সারফেস সিস্টেমের উপর ভিত্তি করে তৈরি করা হয়, তাই এগুলো ডেপথ এফেক্ট, ক্লিপিং এবং সামঞ্জস্যপূর্ণ বর্ডার হাইলাইটের মতো ভৌত বৈশিষ্ট্যগুলো লাভ করে।

শারীরস্থান এবং স্লট

একটি জেটপ্যাক কম্পোজ গ্লিমার কার্ড বেশ কিছু বিশেষায়িত উপাদান দিয়ে তৈরি করা হয়, যা আপনাকে এর বিষয়বস্তু এবং বিন্যাস নিজের মতো করে সাজানোর সুযোগ দেয়।

কার্ড ডিফল্ট

কার্ডগুলির ক্ষেত্রে নিম্নলিখিত ডিফল্টগুলি প্রযোজ্য:

• প্রস্থ : ডিসপ্লে গ্লাসে পাঠযোগ্যতা উন্নত করার জন্য কার্ডগুলো ডিসপ্লের সর্বাধিক উপলব্ধ প্রস্থ জুড়ে থাকে।
• সর্বনিম্ন উচ্চতা : 80.dp
• টেক্সটের উল্লম্ব ব্যবধান : 3.dp
• হেডারের আকৃতি : 24.dp কোণাসহ RoundedCornerShape ব্যবহার করা হয়েছে।
• কন্টেন্ট প্যাডিং : ডিফল্ট হিসেবে 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 ওভারলোড ব্যবহার করা হয়, কারণ শুধুমাত্র কার্ডটি (বা এর অভ্যন্তরীণ অ্যাকশন) ফোকাসযোগ্য হওয়া প্রয়োজন। যদি আপনাকে কার্ডের সম্পূর্ণ পৃষ্ঠটিকে ইন্টারেক্টিভ করতে হয়, তবে এর পরিবর্তে onClick সহ Card ওভারলোড ব্যবহার করুন।
• এই কার্ডটি একটি অ্যাকশন স্লট ব্যবহার করে, তাই কার্ডের উপরিভাগে ফোকাস করা যায় না এবং এর পরিবর্তে ফোকাস অ্যাকশন বাটনে চলে যায়।