Jetpack Compose-এ LazyColumn — এটি কী, বৈশিষ্ট্য এবং কীভাবে কাজ করে

Jetpack Compose-এ LazyColumn কী

LazyColumn একটি composable ফাংশন যা লেজি লোডিং সহ একটি উল্লম্ব স্ক্রলযোগ্য তালিকা প্রয়োগ করে। Column-এর বিপরীতে যা একসাথে সমস্ত চাইল্ড উপাদান রেন্ডার করে, LazyColumn শুধুমাত্র ভিউপোর্টের মধ্যে পড়া উপাদানগুলি তৈরি করে।

LazyColumn-এ লেজি লোডিং প্রক্রিয়া উপাদান পুনরায় ব্যবহারের উপর ভিত্তি করে: যখন স্ক্রল করার সময় একটি উপাদান লুকানো হয়, তখন তার কম্পোজিশন এবং লেআউট একটি নতুন প্রদর্শিত উপাদানের জন্য পুনরায় ব্যবহার করা যেতে পারে। এটি মেমরি এবং CPU সময় বাঁচায়, বিশেষ করে দীর্ঘ তালিকায়।

Android Developers Blog, 2024 অনুসারে, LazyColumn উল্লেখযোগ্য কর্মক্ষমতা হ্রাস ছাড়াই দশ হাজার উপাদানের তালিকা দক্ষতার সাথে পরিচালনা করতে পারে। LazyColumn-এর প্রতিটি উপাদানের একটি কী (key) থাকে যা Compose-কে তালিকা পরিবর্তন হলে উপাদানের অবস্থান সনাক্ত এবং সংরক্ষণ করতে সাহায্য করে।

LazyColumn-এর মৌলিক সিগনেচার

LazyColumn প্যারামিটার modifier, state, contentPadding, reverseLayout, verticalArrangement এবং horizontalAlignment গ্রহণ করে। বিষয়বস্তু DSL ফাংশন items এবং item-এর মাধ্যমে ল্যাম্বডা ব্লকে সংজ্ঞায়িত করা হয়।

@Composable
fun SimpleLazyColumn() {
    val itemsList = (1..100).toList()
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(itemsList) { item ->
            Text(text = "আইটেম $item")
        }
    }
}

LazyColumn-এর প্যারামিটার: items এবং item

LazyColumn-এর DSL ব্লক বিষয়বস্তু যোগ করার জন্য items এবং item ফাংশন প্রদান করে। items উপাদান তৈরির জন্য একটি ডেটা সংগ্রহ, একটি কী এবং ফ্যাক্টরি ফাংশন গ্রহণ করে। item তালিকায় একটি একক স্থির উপাদান যোগ করে।

itemsIndexed হল items-এর একটি বৈকল্পিক যা ডেটার সাথে উপাদান সূচকও পাঠায়। এটি তখন উপযোগী যখন আপনি আলাদা গণনা ছাড়াই উপাদানের অবস্থান জানতে চান। items(size) কোনো সংগ্রহের সাথে বাঁধা ছাড়াই শুধুমাত্র উপাদানের সংখ্যা এবং একটি ফ্যাক্টরি গ্রহণ করে।

items-এ key প্যারামিটার প্রতিটি উপাদানকে স্বতন্ত্রভাবে চিহ্নিত করে। Material Design Guidelines, 2025 অনুসারে, কীগুলি উপাদান আপডেট এবং অ্যানিমেট করার সময় কর্মক্ষমতা উন্নত করে, কারণ Compose কী দ্বারা একটি নির্দিষ্ট উপাদানের গতিবিধি বা পরিবর্তন ট্র্যাক করতে পারে।

বিভিন্ন উপাদানের ধরনের সাথে উদাহরণ

contentType সহ items ফাংশন LazyColumn-কে বিভিন্ন ধরনের উপাদানের পুনরায় ব্যবহার অপ্টিমাইজ করতে দেয়। নীচের উদাহরণে একটি তালিকায় সেকশন হেডার এবং সাধারণ সারি ব্যবহার করা হয়েছে।

@Composable
fun MixedItemsList() {
    LazyColumn {
        item {
            Text(
                text = "শিরোনাম",
                style = MaterialTheme.typography.headlineMedium
            )
        }
        items(
            items = (1..20).toList(),
            key = { it },
            contentType = { "item" }
        ) { item ->
            Text(text = "সারি $item")
        }
    }
}

LazyListState এবং স্ক্রল ব্যবস্থাপনা

LazyListState হল LazyColumn-এর একটি অবস্থা অবজেক্ট যা বর্তমান স্ক্রল অবস্থান, প্রথম দৃশ্যমান উপাদান এবং অফসেট ট্র্যাক করে। এটি rememberLazyListState()-এর মাধ্যমে তৈরি করা যেতে পারে এবং LazyColumn-এর state প্যারামিটারে পাঠানো যেতে পারে।

LazyListState একটি নির্দিষ্ট উপাদানে প্রোগ্রামেটিক স্ক্রলিংয়ের জন্য animateScrollToItem এবং scrollToItem পদ্ধতি প্রদান করে। animateScrollToItem একটি মসৃণ স্ক্রল অ্যানিমেশন তৈরি করে, যখন scrollToItem তাৎক্ষণিকভাবে স্ক্রল করে। উভয় পদ্ধতির জন্য CompositionContext-এ coroutine-এর ভিতরে কল করা প্রয়োজন।

Android Developers, 2024 অনুসারে, LazyListState-এ layoutInfo-ও রয়েছে যা দৃশ্যমান উপাদান সম্পর্কে তথ্য প্রদান করে — তাদের সূচক, অফসেট এবং আকার। এটি বিশ্লেষণ, ভিউ ট্র্যাকিং বা অসীম স্ক্রলিং বাস্তবায়নের জন্য উপযোগী।

প্রোগ্রামেটিক স্ক্রলিং সহ উদাহরণ

এই উদাহরণে, LazyColumn LazyListState-এর মাধ্যমে নিয়ন্ত্রিত হয়। একটি বোতাম মসৃণ অ্যানিমেশন সহ সূচক 50-এ উপাদানে তালিকা স্ক্রল করে।

@Composable
fun ScrollableList() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()

    Column {
        Button(
            onClick = {
                scope.launch {
                    listState.animateScrollToItem(50)
                }
            }
        ) {
            Text("50-এ স্ক্রল করুন")
        }

        LazyColumn(state = listState) {
            items((1..100).toList()) { item ->
                Text(
                    text = "আইটেম $item",
                    modifier = Modifier.padding(8.dp)
                )
            }
        }
    }
}

LazyColumn-এর কর্মক্ষমতা অপ্টিমাইজেশন

LazyColumn-এর মূল কর্মক্ষমতা বিষয় হল কীগুলির সঠিক ব্যবহার। প্রতিটি উপাদানের key প্যারামিটারের মাধ্যমে একটি অনন্য স্থিতিশীল কী থাকা উচিত। কী ছাড়া, Compose ডেটা পরিবর্তন হলে সঠিকভাবে উপাদান পুনরায় ব্যবহার করতে পারে না, যা পুনঃগঠনের দিকে নিয়ে যায়।

contentType LazyColumn-কে বলে কোন উপাদানগুলির একই লেআউট ধরন রয়েছে। যখন একই contentType-এর দুটি উপাদান রিসাইক্লিং পুলে প্রবেশ করে, LazyColumn পুনঃগঠন ছাড়াই তাদের লেআউট পুনরায় ব্যবহার করতে পারে। Android Developers Blog, 2024 অনুসারে, contentType বিভিন্ন উপাদানের ধরনের তালিকায় কর্মক্ষমতা 30–50% উন্নত করে।

LazyColumn-এর জন্য ফ্যাক্টরি ফাংশনে অস্থির প্যারামিটার এড়ানোও গুরুত্বপূর্ণ। প্রতিবার যখন একটি উপাদানের প্যারামিটার পরিবর্তিত হয়, Compose সেই উপাদানটি পুনঃগঠন করে। স্থিতিশীল মানের জন্য remember এবং derivedStateOf ব্যবহার পুনঃগঠনের সংখ্যা হ্রাস করে।

কর্মক্ষমতা বিষয়ক সারণী

LazyColumn-এ Sticky headers এবং সেকশন

stickyHeader হল LazyColumn-এর একটি DSL ফাংশন যা স্ক্রল করার সময় সেকশন হেডারকে তালিকার শীর্ষে পিন করে। যখন পরবর্তী সেকশনটি শীর্ষে পৌঁছায়, তার হেডার বর্তমান হেডারটিকে প্রতিস্থাপন করে। এই আচরণটি ব্যবহারকারীদের কাছে যোগাযোগ তালিকা এবং ক্যালেন্ডার থেকে পরিচিত।

stickyHeader item-এর মতো একটি কী এবং ফ্যাক্টরি ফাংশন গ্রহণ করে। সাধারণ item-এর বিপরীতে, stickyHeader তার সেকশনের বিষয়বস্তুর মাধ্যমে স্ক্রল করার সময় দৃশ্যমান থাকে। যখন একটি সেকশন সম্পূর্ণভাবে স্ক্রল হয়, পরবর্তী সেকশনের হেডার পূর্ববর্তী হেডারটিকে বাইরে ঠেলে দেয়।

Material Design Guidelines, 2025 অনুসারে, sticky headers দীর্ঘ তালিকায় নেভিগেশন উন্নত করে এবং ব্যবহারকারীর উপর জ্ঞানীয় বোঝা হ্রাস করে। একটি sticky header প্রয়োগ করতে, items উপাদানের সাপেক্ষে সঠিক অবস্থানে একটি সেকশন হেডারকে stickyHeader-এ মোড়ানো যথেষ্ট।

@Composable
fun SectionedList(sections: Map<String, List<String>>) {
    LazyColumn {
        sections.forEach { (header, items) ->
            stickyHeader {
                Text(
                    text = header,
                    modifier = Modifier.background(Color.White)
                        .padding(16.dp)
                )
            }
            items(items) { item ->
                Text(text = item, modifier = Modifier.padding(8.dp))
            }
        }
    }
}