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

Lists let users select an item from a set of choices on Wear OS devices.

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

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

The following animation shows how a list element scales and changes shape when approaching the top and bottom of the screen:

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

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 ব্যবহার করার পরামর্শ দিচ্ছি। এই প্রভাব ব্যবহারকারীদের তালিকার আইটেমগুলির মধ্যে আরও সুনির্দিষ্টভাবে নেভিগেট করতে সাহায্য করে এবং দীর্ঘ তালিকার মধ্যে আরও দ্রুত সরাতে সাহায্য করে।

To add this effect to the Horologist's version of the ScalingLazyColumn , set the rotaryMode parameter of columnState to RotaryWithSnap , as shown in the following code snippet: 

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt
{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %} {% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %}