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

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

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

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

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

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

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

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

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

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

উদাহরণ: শিরোনামের জন্য স্থানসহ উল্লম্ব তালিকা

Jetpack Compose Glimmer একটি ভার্টিকাল লিস্টের ওভারলোডও প্রদান করে, যাতে একটি টাইটেল স্লট থাকে। ফোকাস-অযোগ্য টাইটেলটি (সাধারণত একটি TitleChip ) উপরে মাঝখানে স্থির থাকে, এবং লিস্টের কন্টেন্ট এর নিচে স্ক্রল করতে থাকে।

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

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

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

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

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