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

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

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

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

Σύμφωνα με το Android Developers Blog, 2024, το LazyRow χρησιμοποιεί την ίδια αρχιτεκτονική LazyList με το LazyColumn, συμπεριλαμβανομένων των LazyListState, μηχανισμού επαναχρησιμοποίησης μέσω Pool και υποστήριξης για διαφορετικούς τύπους στοιχείων. Η μέγιστη αποδοτικότητα επιτυγχάνεται με σταθερό ύψος στοιχείων.

Βασική υπογραφή LazyRow

LazyRow δέχεται τις παραμέτρους modifier, state, contentPadding, reverseLayout, horizontalArrangement και verticalAlignment. Το περιεχόμενο ορίζεται μέσω των συναρτήσεων DSL items και item, παρόμοια με το LazyColumn.

@Composable
fun SimpleLazyRow() {
    val items = (1..50).toList()
    LazyRow(
        modifier = Modifier.fillMaxWidth().height(100.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp)
    ) {
        items(items) { item ->
            Box(
                modifier = Modifier.size(80.dp).background(Color.Gray)
            ) {
                Text(text = "$item", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

Ιδιότητες LazyRow: horizontalArrangement και contentPadding

horizontalArrangement διαχειρίζεται την κατανομή των στοιχείων κατά μήκος του οριζόντιου άξονα μέσα στο LazyRow. Διατίθενται οι ίδιες τιμές Arrangement όπως στο Row: Start, Center, End, SpaceBetween, SpaceEvenly, SpaceAround και spacedBy με προσαρμοσμένη απόσταση.

contentPadding προσθέτει περιθώριο στις άκρες του περιέκτη LazyRow. Σε αντίθεση με το Modifier.padding, το contentPadding λαμβάνεται υπόψη κατά την κύλιση: το πρώτο στοιχείο θα έχει απόσταση από την αριστερή άκρη, το τελευταίο — από τη δεξιά. Σύμφωνα με το Material Design Guidelines, 2025, το contentPadding είναι υποχρεωτικό για καρουσέλ και γκαλερί, ώστε το πρώτο και το τελευταίο στοιχείο να μην κολλούν στην άκρη της οθόνης.

verticalAlignment ευθυγραμμίζει τα στοιχεία κάθετα μέσα στο LazyRow. Από προεπιλογή χρησιμοποιείται το Alignment.Top. Για κεντράρισμα στοιχείων διαφορετικού ύψους χρησιμοποιήστε Alignment.CenterVertically, το οποίο είναι χρήσιμο για καρουσέλ με εικόνες διαφορετικών αναλογιών.

Πίνακας παραμέτρων LazyRow

Έλεγχος οριζόντιας κύλισης με LazyListState

LazyListState για LazyRow λειτουργεί πανομοιότυπα με το LazyColumn: παρακολουθεί το πρώτο ορατό στοιχείο, τη μετατόπιση και τη γενική θέση κύλισης. Η κατάσταση δημιουργείται μέσω rememberLazyListState() και μεταβιβάζεται στην παράμετρο state.

Ο προγραμματικός έλεγχος κύλισης του LazyRow γίνεται με τις ίδιες μεθόδους: animateScrollToItem για ομαλή κίνηση και scrollToItem για άμεση κύλιση. Και οι δύο καλούνται μέσα σε ένα coroutine. Αυτό είναι χρήσιμο για καρουσέλ με κουμπιά "Αριστερά/Δεξιά" ή για αυτόματη κύλιση.

Σύμφωνα με το Android Developers, 2024, το LazyRow υποστηρίζει επίσης το SnapFlingBehavior — συμπεριφορά κατά την απότομη κύλιση που σταματά στο πλησιέστερο στοιχείο, όχι μεταξύ στοιχείων. Αυτό δημιουργεί ένα εφέ "κόλλημα" στο στοιχείο, γνωστό από καρουσέλ και γκαλερί.

@Composable
fun CarouselWithSnap() {
    val listState = rememberLazyListState()
    val scope = rememberCoroutineScope()
    val items = listOf("A", "B", "C", "D", "E")

    Column {
        LazyRow(
            state = listState,
            flingBehavior = SnapFlingBehavior(listState),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Card(modifier = Modifier.width(150.dp)) {
                    Text(text = item, modifier = Modifier.padding(16.dp))
                }
            }
        }

        Row(modifier = Modifier.fillMaxWidth()) {
            Button(onClick = {
                scope.launch {
                    listState.animateScrollToItem(0)
                }
            }) { Text("Για να ξεκινήσετε") }
        }
    }
}

Παραδείγματα χρήσης LazyRow σε διεπαφές

Πρώτο παράδειγμα — LazyRow για γκαλερί εικόνων με προεπισκοπήσεις. Κάθε στοιχείο είναι ένα Box με εικόνα και λεζάντα. Το LazyRow χειρίζεται αποτελεσματικά δεκάδες και εκατοντάδες εικόνες, φορτώνοντας μόνο τις ορατές.

@Composable
fun ImageGallery(images: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(start = 16.dp, end = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(images, key = { it }) { url ->
            AsyncImage(
                model = url,
                contentDescription = "Image",
                modifier = Modifier.size(120.dp)
            )
        }
    }
}

Δεύτερο παράδειγμα — LazyRow για λίστα κατηγοριών με εικονίδια. Οι κατηγορίες εμφανίζονται ως τσιπ, και ο χρήστης μπορεί να τις κυλήσει οριζόντια. Το LazyRow με spacedBy και contentPadding δημιουργεί αποστάσεις μεταξύ κατηγοριών και στις άκρες.

@Composable
fun CategoryChips(categories: List<String>) {
    LazyRow(
        contentPadding = PaddingValues(horizontal = 16.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(categories, key = { it }) { category ->
            AssistChip(
                onClick = {},
                label = { Text(category) }
            )
        }
    }
}

LazyRow εναντίον Row: πότε να επιλέξετε τι

Η επιλογή μεταξύ LazyRow και Row εξαρτάται από τον αριθμό των στοιχείων. Το Row είναι κατάλληλο για 5–10 στοιχεία που είναι πάντα ορατά στην οθόνη. Το LazyRow είναι υποχρεωτικό όταν τα στοιχεία είναι πολλά ή ο αριθμός τους είναι δυναμικός.

Row αποδίδει όλα τα στοιχεία ταυτόχρονα, γεγονός που οδηγεί σε καθυστερήσεις με μεγάλο αριθμό στοιχείων. Το LazyRow αποδίδει μόνο τα ορατά στοιχεία, καθιστώντας το προτιμότερο για λίστες με κύλιση. Σύμφωνα με το Android Developers Blog, 2024, το όριο μετάβασης είναι περίπου 10 στοιχεία: αν υπάρχουν περισσότερα, χρησιμοποιήστε LazyRow.

LazyRow υποστηρίζει επίσης κινούμενα σχέδια, SnapFlingBehavior και ομαδοποίηση μέσω διαχωριστικών, καθιστώντας το πιο ευέλικτο για σύνθετες διεπαφές. Το Row είναι απλούστερο και δεν απαιτεί LazyListState, αλλά δεν είναι βελτιστοποιημένο για μακριές λίστες.

• Row — για 5–10 στατικά στοιχεία χωρίς κύλιση
• LazyRow — για 10+ στοιχεία με οριζόντια κύλιση
• LazyRow — για καρουσέλ, γκαλερί, δυναμικές λίστες