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

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

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

চিত্র ১. জেটপ্যাক কম্পোজ গ্লিমারে ব্যবহৃত বিভিন্ন ধরনের তালিকার একটি উদাহরণ।

আচরণ এবং শিশুর বিষয়গুলিতে মনোযোগ দিন

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

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

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

নিম্নলিখিত কোডটিতে দেখানো হয়েছে কিভাবে `item` এবং `items` DSL মেথড ব্যবহার করে একটি Glimmer লেজি কলামের মাধ্যমে আইটেমের একটি তালিকা তৈরি করতে হয়:

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

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

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

নিম্নলিখিত কোডটি একটি টাইটেল স্লট সহ একটি গ্লিমার লেজি কলাম তৈরি করে:

@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) } }
    }
}

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

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

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