জেটপ্যাক কম্পোজ গ্লিমারে টাইটেল চিপস

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

Jetpack Compose Glimmer-এ, TitleChip কম্পোনেন্টটি একটি কার্ডের মতো সংশ্লিষ্ট কন্টেন্টের জন্য সংক্ষিপ্ত, নন-ইন্টারেক্টিভ লেবেল প্রদান করার জন্য ডিজাইন করা হয়েছে। একটি সংক্ষিপ্ত শিরোনাম, নাম বা স্ট্যাটাসের মতো সংক্ষিপ্ত তথ্য প্রদর্শন করতে টাইটেল চিপ ব্যবহার করুন। যেহেতু টাইটেল চিপগুলো ফোকাসযোগ্য বা ইন্টারেক্টিভ নয়, তাই Jetpack Compose Glimmer UI-এর মধ্যে এগুলো সম্পূর্ণরূপে তথ্যমূলক ভূমিকা পালন করে। উদাহরণস্বরূপ, আপনি উপকরণের একটি স্ক্রোলযোগ্য তালিকার পাশে "উপকরণ" লেবেলযুক্ত একটি টাইটেল চিপ দিতে পারেন।

চিত্র ১. জেটপ্যাক কম্পোজ গ্লিমারে ব্যবহৃত টাইটেল চিপের কয়েকটি ভিন্ন শৈলীর উদাহরণ।

ডিফল্ট টাইটেল চিপ এবং স্টিকি টাইটেল চিপ দেখানো হয়েছে। স্টিকি টাইটেল চিপগুলো একটি আউটলাইনসহ প্রদর্শিত হয়।

  1. শিরোনাম চিপস লেবেল
  2. ঐচ্ছিক প্রধান আইকন বা সত্তা

সাধারণ উদাহরণ: একটি সংক্ষিপ্ত শিরোনাম চিপ প্রদর্শন করুন

আপনি খুব অল্প কোড ব্যবহার করে একটি সংক্ষিপ্ত টাইটেল চিপ তৈরি করতে পারেন:

TitleChip { Text("Messages") }

বিস্তারিত উদাহরণ: একটি কার্ডের সাহায্যে টাইটেল চিপ প্রদর্শন করুন

অন্য কোনো কম্পোনেন্টের সাথে টাইটেল চিপ ব্যবহার করতে, কম্পোজেবলের মধ্যে অন্য কম্পোনেন্টটির উপরে TitleChipDefaults.AssociatedContentSpacing টাইটেল চিপটি রাখুন। নিচের কোডটিতে দেখানো হয়েছে কিভাবে একটি কার্ডের সাথে টাইটেল চিপ ব্যবহার করতে হয়:

@Composable
fun TitleChipExample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

কোড সম্পর্কে মূল বিষয়গুলো

  • দুটি কম্পোনেন্টের মধ্যে TitleChipDefaults.AssociatedContentSpacing দ্বারা সংজ্ঞায়িত সঠিক উল্লম্ব ব্যবধান প্রদান করার জন্য Spacer একটি নির্দিষ্ট উচ্চতা রয়েছে।