Wear OS এর জন্য রচনা সহ তালিকা


Wear OS ডিভাইসে তালিকা ব্যবহারকারীদের বিভিন্ন বিকল্পের মধ্য থেকে কোনো একটি আইটেম বেছে নিতে সাহায্য করে।

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

প্রস্তাবিত স্কেলিং এবং স্ক্রোলিং ইফেক্টগুলো প্রয়োগ করতে:

  1. স্ক্রিনে আইটেমটি স্ক্রল করার সময় Compose-কে উচ্চতার পরিবর্তন গণনা করার সুযোগ দিতে Modifier.transformedHeight ব্যবহার করুন।
  2. আইটেমের বিষয়বস্তু ছোট করা সহ ভিজ্যুয়াল ইফেক্টগুলো প্রয়োগ করতে transformation = SurfaceTransformation(transformationSpec) ব্যবহার করুন।
  3. যেসব কম্পোনেন্ট প্যারামিটার হিসেবে transformation গ্রহণ করে না, যেমন Text সেগুলোর জন্য একটি কাস্টম TransformationSpec ব্যবহার করুন।

নিম্নলিখিত অ্যানিমেশনটি দেখায় কিভাবে একটি তালিকার উপাদান স্ক্রিনের উপরে এবং নীচে যাওয়ার সময় তার আকার ও আকৃতি পরিবর্তন করে:

নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে TransformingLazyColumn লেআউট ব্যবহার করে একটি তালিকা তৈরি করা যায়, যার কন্টেন্ট বিভিন্ন Wear OS স্ক্রিনের আকারে চমৎকার দেখায়

এই কোড স্নিপেটটিতে minimumVerticalContentPadding মডিফায়ারটির ব্যবহারও দেখানো হয়েছে, যা লিস্টের উপরে ও নীচে সঠিক প্যাডিং প্রয়োগ করার জন্য লিস্ট আইটেমগুলোতে সেট করতে হয়।

স্ক্রোল ইন্ডিকেটর দেখানোর জন্য, ScreenScaffold এবং TransformingLazyColumn এর মধ্যে columnState শেয়ার করুন:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

একটি স্ন্যাপ-অ্যান্ড-ফ্লিং এফেক্ট যোগ করুন

যদি আপনার একটি স্ন্যাপ-অ্যান্ড-ফ্লিং বিহেভিয়ার যোগ করার প্রয়োজন হয়, তাহলে flingBehavior প্যারামিটারটিকে TransformingLazyColumnDefaults.snapFlingBehavior(columnState) -এ সেট করুন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে:
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
{% হুবহু %} {% endverbatim %} {% হুবহু %} {% endverbatim %}