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

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

Row — είναι μια συνάρτηση composable που τοποθετεί τα θυγατρικά στοιχεία σε οριζόντια ακολουθία. Στην ιεραρχία διατάξεων Compose, το Row κατέχει τη θέση του βασικού δοχείου μαζί με τα Column και Box.

Το Row δεν απαιτεί καθορισμό διαστάσεων — προσαρμόζεται αυτόματα στο περιεχόμενο. Το πλάτος του Row ισούται με το άθροισμα των πλατών των θυγατρικών στοιχείων συμπεριλαμβανομένων των κενών, εκτός αν έχει οριστεί Modifier.fillMaxWidth ή σταθερό μέγεθος.

Τα θυγατρικά στοιχεία του Row μπορούν να έχουν δικούς τους τροποποιητές που επηρεάζουν τη θέση τους μέσα στο δοχείο. Για παράδειγμα, το Modifier.weight επιτρέπει στα στοιχεία να καταλαμβάνουν αναλογικό μέρος του διαθέσιμου χώρου.

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

Σύνταξη και βασική υπογραφή του Row

Η βασική υπογραφή του Row περιλαμβάνει την παράμετρο modifier, horizontalArrangement και verticalAlignment. Όλα τα θυγατρικά στοιχεία μεταβιβάζονται στο τελευταίο μπλοκ λάμδα content.

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Ένα")
        Text(text = "Δύο")
        Text(text = "Τρία")
    }
}

Ιδιότητες του Row: horizontalArrangement και verticalAlignment

Η παράμετρος horizontalArrangement καθορίζει πώς κατανέμονται τα θυγατρικά στοιχεία κατά μήκος του οριζόντιου άξονα μέσα στο Row. Οι τιμές Start, End, Center, SpaceBetween, SpaceAround και SpaceEvenly από την κλάση Arrangement είναι διαθέσιμες.

Arrangement.Start τοποθετεί τα στοιχεία στην αρχή του δοχείου, Arrangement.End — στο τέλος, και Arrangement.Center — στο κέντρο. Αυτές οι τιμές λειτουργούν παρόμοια με την ιδιότητα justify-content στο CSS Flexbox.

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

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

Πίνακας τιμών Arrangement

Κατανομή χώρου με Modifier.weight

Modifier.weight — είναι ένας τροποποιητής διαθέσιμος μόνο εντός Row και Column, που κατανέμει τον διαθέσιμο χώρο μεταξύ των θυγατρικών στοιχείων αναλογικά με την καθορισμένη τιμή. Αν ένα στοιχείο έχει βάρος 1.0f και ένα άλλο 2.0f, το δεύτερο στοιχείο θα καταλάβει διπλάσιο χώρο.

Τα στοιχεία χωρίς weight καταλαμβάνουν τον χώρο που χρειάζονται για το περιεχόμενό τους. Ο υπόλοιπος χώρος κατανέμεται μεταξύ των στοιχείων με weight αναλογικά με το βάρος τους. Αυτή η συμπεριφορά είναι ανάλογη με την ιδιότητα flex-grow στο CSS Flexbox.

Σύμφωνα με το Android Developer Documentation, 2025, το weight λειτουργεί μόνο εντός Row, Column και BoxWithConstraints. Κατά τη χρήση weight στο Row, όλα τα θυγατρικά στοιχεία μετρώνται σε δύο περάσματα: πρώτα τα στοιχεία χωρίς weight, στη συνέχεια τα στοιχεία με weight.

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "Αριστερά",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "Δεξιά")
    }
}

Παραδείγματα κώδικα με Row

Το πρώτο παράδειγμα δείχνει Row με εικονίδιο και κείμενο — ένα τυπικό σενάριο για λίστα επαφών ή ρυθμίσεων. Τα Icon και Text είναι τυλιγμένα σε Row με κεντραρισμένο verticalAlignment.

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "Προσθήκη στα αγαπημένα")
    }
}

Το δεύτερο παράδειγμα δείχνει Row με κουμπιά και ομοιόμορφη κατανομή. Το SpaceEvenly εγγυάται ίσα κενά μεταξύ όλων των κουμπιών και των άκρων του δοχείου.

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("Ακύρωση") }
        Button(onClick = {}) { Text("Αποθήκευση") }
    }
}

Το τρίτο παράδειγμα — Row μέσα σε Card για εμφάνιση βαθμολογίας. Το ένθετο Row με Modifier.weight επιτρέπει στο αστέρι βαθμολογίας και στην αριθμητική τιμή να καταλαμβάνουν σταθερό χώρο.

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "Βαθμολογία:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

Χαρακτηριστικά του Row σε προσαρμοστική διάταξη

Row απαιτεί έλεγχο πλάτους σε προσαρμοστική διάταξη. Αν το περιεχόμενο του Row υπερβαίνει το διαθέσιμο πλάτος οθόνης, τα στοιχεία μπορεί να βγουν εκτός των ορίων του δοχείου. Για να το αποτρέψετε, χρησιμοποιήστε Modifier.horizontalScroll ή μετάβαση σε Column.

Κατά τον συνδυασμό Row με Modifier.weight, είναι σημαντικό να ορίσετε fillMaxWidth για το γονικό Row — διαφορετικά το weight θα κατανείμει ανύπαρκτο χώρο. Σύμφωνα με το Material Design Guidelines, 2025, το Row με weight χωρίς fillMaxWidth θεωρείται λανθασμένη διαμόρφωση.

Για προσαρμοστικές διεπαφές, συνιστάται ο συνδυασμός Row με Box ή η χρήση Arrangement.SpaceBetween για αυτόματη κατανομή στοιχείων σε διαφορετικά μεγέθη οθόνης. Αυτό παρέχει ευελιξία χωρίς ερωτήματα πολυμέσων.

• Modifier.horizontalScroll — προσθέτει κύλιση όταν το Row υπερχειλίζει
• Modifier.weight — κατανέμει τον χώρο αναλογικά
• Arrangement.SpaceBetween — προσαρμοστική κατανομή με στερέωση στα άκρα