Jetpack Compose Glimmer-এ উল্লম্ব স্ট্যাক

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

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

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

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

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

স্ক্রোলিং এবং অবস্থান আচরণ

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

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

ফোকাস ব্যবস্থাপনা

VerticalStack একটি বিশেষায়িত ফোকাস সিস্টেম ব্যবহার করে এটি নিশ্চিত করে যে, ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য বর্তমান ফোরগ্রাউন্ড আইটেমটিই সর্বদা প্রাথমিক লক্ষ্যবস্তু থাকে:

• প্রাথমিক ফোকাস এবং পুনঃপ্রবেশ : প্রাথমিক ফোকাস এবং ফোকাস পুনঃপ্রবেশের সময় স্ট্যাকের বর্তমান শীর্ষ আইটেমটিতে ফোকাস স্থানান্তরিত হয়।
• স্বয়ংক্রিয়-ফোকাস বিজ্ঞপ্তি : আইটেমগুলো পরিবর্তিত হওয়ার সাথে সাথে, স্ট্যাকটি উপরের আইটেমটির জন্য ফোকাস অনুরোধ করে।
• ফোকাস ট্র্যাকিং : প্রতিটি আইটেম তার নিজস্ব ফোকাস স্ট্যাটাসের StackState জানানোর জন্য onFocusChanged ব্যবহার করে।

উদাহরণ: একটি উল্লম্ব স্ট্যাক তৈরি করুন

নিম্নলিখিত কোডটি একাধিক আইটেম সহ একটি উল্লম্ব স্ট্যাক তৈরি করে:

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}
StackSamples.kt

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

• টেক্সটের LocalTextStyle এর textMotion Animated এ সেট করে। এটি লেআউট অ্যানিমেশন বা স্কেলিং ট্রানজিশনের সময় মসৃণ টেক্সট রেন্ডারিং নিশ্চিত করে এবং পিক্সেল-স্ন্যাপিং আর্টিফ্যাক্ট প্রতিরোধ করে।
• ভার্টিকাল স্ট্যাকের উচ্চতার জন্য 364.dp -এর একটি নির্দিষ্ট আকার প্রদান করে। কার্ড ট্রানজিশনের জন্য ভিজ্যুয়াল এলাকা নির্ধারণ করতে সর্বদা একটি নির্দিষ্ট উচ্চতা প্রদান করুন, একটি হাইট মডিফায়ার ব্যবহার করুন, অথবা fillMaxSize মডিফায়ারটি প্রয়োগ করুন।
• অন্যান্য কম্পোনেন্টগুলো সরাসরি শেপ প্যারামিটার গ্রহণ করলেও, VerticalStack তার আইটেমগুলোর ভিজ্যুয়াল সীমানা itemDecoration মডিফায়ার ব্যবহার করে পরিচালনা করে। এই উদাহরণে সামঞ্জস্যপূর্ণ ক্লিপিং এবং ভিজ্যুয়াল ইফেক্ট বজায় রাখার জন্য প্রাথমিক আইটেমের ` itemDecoration হিসেবে সমস্ত চাইল্ড আইটেমের জন্য একই শেপ পাস করা হয়েছে। এই উদাহরণে ডিফল্ট CardDefaults.shape ব্যবহার করা হয়েছে।