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

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

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

একটি স্কেলিং এবং স্ক্রলিং প্রভাব যোগ করার জন্য, স্ক্রীন এবং transformation = SurfaceTransformation(transformationSpec) আইটেমটি স্ক্রীনের মধ্য দিয়ে স্ক্রোল করার সাথে সাথে উচ্চতা পরিবর্তনের গণনা করার জন্য Modifier.transformedHeight ব্যবহার করুন, আইটেমটিকে দৃশ্যমানভাবে মেলে দেখার জন্য স্কেলিং সহ।

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

নিম্নলিখিত কোড স্নিপেট দেখায় কিভাবে TransformingLazyColumn লেআউট ব্যবহার করে একটি তালিকা তৈরি করতে হয় এমন সামগ্রী তৈরি করতে যা Wear OS স্ক্রীনের বিভিন্ন আকারে দুর্দান্ত দেখায় , উদাহরণস্বরূপ নিম্নলিখিত নমুনা কোডে, এটি তালিকার প্রথম এবং শেষ উপাদানগুলিতে প্রয়োজনীয় প্যাডিং যুক্ত করবে যা TransformingLazyColumn এর contentPadding -এ সেট করা আছে। স্ক্রোল নির্দেশক দেখানোর জন্য, ScreenScaffold এবং TransformingLazyColumn মধ্যে columnState ভাগ করুন: 

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

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

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

ScalingLazyColumn এর Horologist-এর সংস্করণে এই প্রভাব যোগ করতে, columnState এর rotaryMode প্যারামিটারকে RotaryWithSnap এ সেট করুন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে: 

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt
{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}