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

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

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

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

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

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

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

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

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

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt