LazyColumn στο Jetpack Compose — τι είναι, ιδιότητες και πώς λειτουργεί

Τι είναι το LazyColumn στο Jetpack Compose

LazyColumn είναι μια composable συνάρτηση που υλοποιεί μια κάθετη κυλιόμενη λίστα με τεμπέλικη φόρτωση. Σε αντίθεση με το Column, που αποδίδει όλα τα θυγατρικά στοιχεία ταυτόχρονα, το LazyColumn δημιουργεί μόνο τα στοιχεία που εισέρχονται στην περιοχή προβολής.

Ο μηχανισμός τεμπέλικης φόρτωσης στο LazyColumn βασίζεται στην επαναχρησιμοποίηση στοιχείων: όταν ένα στοιχείο κρύβεται κατά την κύλιση, η σύνθεση και η διάταξή του μπορούν να επαναχρησιμοποιηθούν για ένα νέο εμφανιζόμενο στοιχείο. Αυτό εξοικονομεί μνήμη και χρόνο επεξεργαστή, ειδικά σε μεγάλες λίστες.

Σύμφωνα με το 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

Το μπλοκ DSL του LazyColumn παρέχει τις συναρτήσεις items και item για την προσθήκη περιεχομένου. Το items δέχεται μια συλλογή δεδομένων, ένα κλειδί και μια συνάρτηση εργοστασίου για τη δημιουργία στοιχείων. Το item προσθέτει ένα στατικό στοιχείο στη λίστα.

itemsIndexed είναι μια παραλλαγή του items που μεταφέρει το ευρετήριο του στοιχείου επιπλέον των δεδομένων. Αυτό είναι χρήσιμο όταν η θέση του στοιχείου είναι απαραίτητη χωρίς ξεχωριστό υπολογισμό. items(size) δέχεται μόνο τον αριθμό των στοιχείων και το εργοστάσιο χωρίς σύνδεση με συλλογή.

Η παράμετρος key στο items αναγνωρίζει μοναδικά κάθε στοιχείο. Σύμφωνα με τις Material Design Guidelines, 2025, τα κλειδιά βελτιώνουν την απόδοση κατά την ενημέρωση και την κίνηση στοιχείων, καθώς το Compose μπορεί να παρακολουθεί τη μετακίνηση ή αλλαγή ενός συγκεκριμένου στοιχείου μέσω του κλειδιού.

Παράδειγμα με διαφορετικούς τύπους στοιχείων

Η συνάρτηση items με contentType επιτρέπει στο 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() και να μεταβιβαστεί στην παράμετρο state του LazyColumn.

LazyListState παρέχει τις μεθόδους animateScrollToItem και scrollToItem για προγραμματική κύλιση σε ένα συγκεκριμένο στοιχείο. Το animateScrollToItem δημιουργεί μια ομαλή κίνηση κύλισης, ενώ το scrollToItem κυλά αμέσως. Και οι δύο μέθοδοι απαιτούν κλήση μέσα σε ένα coroutine στο CompositionContext.

Σύμφωνα με το 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 για σταθερές τιμές μειώνει τον αριθμό των ανασυνθέσεων.

Πίνακας παραγόντων απόδοσης

Sticky headers και ενότητες στο LazyColumn

stickyHeader είναι μια συνάρτηση DSL του LazyColumn που καρφιτσώνει την κεφαλίδα ενότητας στο πάνω μέρος της λίστας κατά την κύλιση. Όταν η επόμενη ενότητα φτάνει στην κορυφή, η κεφαλίδα της αντικαθιστά την τρέχουσα. Αυτή η συμπεριφορά είναι γνωστή στους χρήστες από λίστες επαφών και ημερολόγια.

stickyHeader δέχεται ένα κλειδί και μια συνάρτηση εργοστασίου, όπως το item. Σε αντίθεση με το συνηθισμένο item, το stickyHeader παραμένει ορατό κατά την κύλιση του περιεχομένου της ενότητάς του. Όταν η ενότητα έχει κυλιθεί πλήρως, η κεφαλίδα της επόμενης ενότητας σπρώχνει την προηγούμενη.

Σύμφωνα με τις Material Design Guidelines, 2025, το sticky header βελτιώνει την πλοήγηση σε μεγάλες λίστες και μειώνει το γνωστικό φόρτο του χρήστη. Για την υλοποίηση sticky header, αρκεί να τυλίξετε την κεφαλίδα ενότητας σε stickyHeader στη σωστή θέση σε σχέση με τα στοιχεία items.

@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))
            }
        }
    }
}