Jetpack Compose Glimmer-এ তালিকা

প্রযোজ্য XR ডিভাইস

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

XR ডিভাইসের ধরন সম্পর্কে জানুন →

XR ডিভাইসের ধরন সম্পর্কে জানুন →

Jetpack Compose Glimmer-এ, GlimmerLazyColumn, Compose LazyColumn-এর মতো কাজ করে। এটি শুধু হাই পারফর্ম্যান্স বজায় রাখার জন্য দৃশ্যমান আইটেম কম্পোজ ও লেআউট করে। তবে, Glimmer লেজি কলামগুলি ডিসপ্লে গ্লাস কন্ট্রোলের জন্য তৈরি করা হয়েছে, যেখানে ব্যবহারকারী টাচস্ক্রিনের পরিবর্তে টাচপ্যাড ব্যবহার করে ইন্টার‍্যাক্ট করেন। মোবাইল ব্যবহারকারী যেকোনও সময় স্ক্রিনের যেকোনও কোঅর্ডিনেটে ট্যাপ করতে পারলেও, ডিসপ্লে গ্লাস ব্যবহারকারী শুধুমাত্র ফোকাসে থাকা আইটেমের সাথে ইন্টার‍্যাক্ট করতে পারেন।

ফোকাস আচরণ ও চাইল্ড আইটেম

Glimmer লেজি কলাম অটোমেটিক ফোকাস-ভিত্তিক নেভিগেশন ম্যানেজ করে। মোবাইল ডিভাইসের তালিকার মতো নয়, যেখানে ফোকাস ও স্ক্রল প্রায়ই আলাদা থাকে, সেখানে Glimmer লেজি কলাম, ব্যবহারকারী টাচপ্যাড দিয়ে স্ক্রল করার সময় এর চাইল্ড আইটেমের মাধ্যমে ফোকাস সরিয়ে এই দু'টি কোঅর্ডিনেট করে। তালিকাটি নিজে থেকে ফোকাসযোগ্য নয়, তাই এটি নিজের চাইল্ডের জন্য ফোকাস ম্যানেজ করে ও অনুরোধ করে যাতে স্ক্রল করার সময় ব্যবহারকারী ইন্টার‍্যাকশনের একটি স্পষ্ট পয়েন্ট পান।

সরাসরি টাচ ইনপুট না থাকার কারণে, Glimmer-এর মধ্যে থাকা সব চাইল্ড আইটেমকে লেজি কলাম ফোকাসযোগ্য করে তুলুন। আইটেমে ফোকাস করা হলে, একটি ভিজ্যুয়াল রেসপন্সও প্রদান করুন, যেমন অ্যাক্টিভ বর্ডার বা হাইলাইট। ব্যবহারকারীরা এখনও ফোকাস করা যায় না এমন আইটেম স্ক্রল করে দেখতে পেলেও, সেগুলির সাথে ইন্টার‍্যাক্ট করতে পারবেন না। সম্ভব হলে, ListItem বা Card-এর মতো বিল্ট-ইন কম্পোনেন্ট ব্যবহার করুন, কারণ এইসব কম্পোনেন্ট আগে থেকেই ফোকাস করা যায় এবং ফোকাস স্টেটের জন্য ভিজ্যুয়াল ফিডব্যাক প্রদান করে।

উদাহরণ: একাধিক আইটেম সহ গ্লিমার লেজি কলাম

নিচের কোডে দেখানো হয়েছে যে কীভাবে আইটেমের তালিকা তৈরি করতে, আইটেম ও items DSL মেথড সহ Glimmer লেজি কলাম ব্যবহার করতে হয়:

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
GlimmerLazyColumnSamples.kt

উদাহরণ: শিরোনাম স্লট সহ গ্লিমার লেজি কলাম

এছাড়াও, Jetpack Compose Glimmer GlimmerLazyColumn-এর একটি ওভারলোড প্রদান করে যা একটি টাইটেল স্লট কন্টেন করে। ফোকাস করা যায় না এমন শীর্ষক, সাধারণত একটি TitleChip, উপরের দিকে মাঝখানে স্থির থাকে, এর নিচে তালিকার কন্টেন্ট স্ক্রল করে।

নিচের কোডটি একটি শিরোনাম স্লট সহ Glimmer লেজি কলাম তৈরি করে:

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
GlimmerLazyColumnSamples.kt

প্রোগ্রাম্যাটিক তালিকা অপারেশনের জন্য Glimmer লেজি লিস্ট স্টেট ব্যবহার করা

firstVisibleItemIndex এবং firstVisibleItemScrollOffset প্রপার্টি ব্যবহার করে তালিকার স্ট্যাটাসের বিভিন্ন দিক, যেমন এর স্ক্রল পজিশন কন্ট্রোল ও পর্যবেক্ষণ করতে, GlimmerLazyListState ব্যবহার করুন।

scrollToItem ও animateScrollToItem ব্যবহার করে প্রোগ্রামমেটিক স্ক্রল করার জন্য আপনি rememberGlimmerLazyListState ব্যবহার করে এই স্টেটকে হোয়েস্ট করতে পারবেন।