Column: κάθετη διάταξη και διαμόρφωση του container στο Compose

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

Column — είναι μια Composable συνάρτηση που δέχεται προαιρετικές παραμέτρους: modifier, verticalArrangement, horizontalAlignment και content — μια lambda με ColumnScope. Μέσα στο Column, οι θυγατρικές Composable συναρτήσεις τοποθετούνται από πάνω προς τα κάτω με τη σειρά δήλωσης. Το ύψος του Column ισούται με το άθροισμα των υψών των θυγατρικών στοιχείων συν τον χώρο που καθορίζεται από το Arrangement. Το πλάτος — σύμφωνα με το μέγιστο πλάτος του θυγατρικού στοιχείου λαμβάνοντας υπόψη το Alignment.

Το Column είναι ένα αόρατο container: δεν έχει δικό του φόντο ή περίγραμμα από προεπιλογή. Αν χρειάζεται φόντο — προσθέστε Modifier.background() στο ίδιο το Column. Σε αντίθεση με το LazyColumn, το Column εμφανίζει όλα τα θυγατρικά στοιχεία ταυτόχρονα και δεν υποστηρίζει εικονικοποίηση. Αυτό σημαίνει ότι το Column είναι κατάλληλο μόνο για μικρά σύνολα δεδομένων — έως 10-15 στοιχεία. Για μεγάλες λίστες χρησιμοποιήστε το LazyColumn.

ColumnScope — είναι ένα receiver για το lambda content του Column. Παρέχει πρόσθετους modifiers που λειτουργούν μόνο μέσα στο Column: weight(), align(), alignByBaseline(). Αυτοί οι modifiers δεν έχουν νόημα εκτός του Column, καθώς βασίζονται στην ιδιαιτερότητα της κάθετης διάταξης. Για παράδειγμα, το Modifier.align(Alignment.CenterHorizontally) στοιχίζει το θυγατρικό στοιχείο στο κέντρο του Column οριζόντια.

Παράμετροι Column: Arrangement, Alignment, Modifier

VerticalArrangement καθορίζει πώς κατανέμεται ο κάθετος χώρος μεταξύ των στοιχείων. Διαθέσιμες τιμές: Arrangement.Top (προεπιλογή), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Αν το ύψος του Column είναι μεγαλύτερο από το άθροισμα των υψών των στοιχείων, το Arrangement κατανέμει τον ελεύθερο χώρο. Αν τα στοιχεία καταλαμβάνουν όλο το ύψος — το Arrangement δεν έχει επίδραση.

HorizontalAlignment ορίζει την οριζόντια στοίχιση κάθε θυγατρικού στοιχείου. Alignment.Start (προεπιλογή, LTR), CenterHorizontally, End. Το Alignment δρα σε κάθε στοιχείο ανεξάρτητα: αν ένα στοιχείο είναι στενό και ένα άλλο φαρδύ — το πρώτο θα στοιχιστεί, το δεύτερο μπορεί να βγει εκτός των ορίων του Column. Το Alignment λειτουργεί μόνο αν το Column έχει σταθερό πλάτος ή fillMaxWidth.

Modifier για το Column: Το Column δέχεται ένα Modifier που εφαρμόζεται στο ίδιο το container. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — όλοι οι τυπικοί modifiers λειτουργούν. Ιδιαιτερότητα: το Modifier.height(IntrinsicSize.Min) αναγκάζει το Column να υπολογίσει το ελάχιστο ύψος βάσει των θυγατρικών στοιχείων λαμβάνοντας υπόψη την Intrinsic measurement.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Πάνω", modifier = Modifier.background(Color.Cyan))
        Text("Μέση", modifier = Modifier.background(Color.Magenta))
        Text("Κάτω", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column προσαρμόζει το ύψος στο περιεχόμενο
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Σύντομο κείμενο")
        Text("Ένα πολύ μακρύ κείμενο που θα τυλιχθεί μέσα στη στήλη")
    }
}

Column weight: κατανομή χώρου μεταξύ στοιχείων

Modifier.weight() — είναι ένας ColumnScope modifier που κατανέμει τον ελεύθερο κάθετο χώρο μεταξύ των στοιχείων του Column αναλογικά σύμφωνα με τα καθορισμένα βάρη. Αν το Column καταλαμβάνει ύψος 400dp και τα θυγατρικά στοιχεία συνολικά 100dp, τότε τα υπόλοιπα 300dp μοιράζονται μεταξύ των weight στοιχείων. Ένα στοιχείο με weight(2f) θα λάβει διπλάσιο χώρο από ένα στοιχείο με weight(1f).

fill — η δεύτερη παράμετρος του weight: weight(weight: Float, fill: Boolean = true). Αν fill = true (προεπιλογή), το στοιχείο τεντώνεται σε όλο το διαθέσιμο ύψος. Αν fill = false — το στοιχείο καταλαμβάνει μόνο το intrinsic ύψος του, ο υπόλοιπος χώρος παραμένει κενός. Αυτό είναι χρήσιμο όταν το στοιχείο πρέπει να είναι κολλημένο στη μία πλευρά, αλλά το weight καθορίζει μόνο την αναλογία κατανομής του κενού χώρου.

Περιορισμοί του weight: το weight λειτουργεί μόνο σε Column με σταθερό ύψος ή fillMaxHeight(). Αν το ύψος του Column καθορίζεται από τα θυγατρικά στοιχεία (wrap content), τα βάρη δεν έχουν νόημα — δεν υπάρχει ελεύθερος χώρος για κατανομή. Επίσης, το weight δεν μπορεί να συνδυαστεί με Modifier.height() στο ίδιο στοιχείο — έρχονται σε αντίφαση και το weight αγνοείται.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Καταλαμβάνει το 1/6 του ύψους (βάρος 1 από άθροισμα 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Καταλαμβάνει το 2/6 του ύψους
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Καταλαμβάνει το 3/6 του ύψους
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: πότε να χρησιμοποιείτε τι

Column εμφανίζει όλα τα θυγατρικά στοιχεία αμέσως. Αν υπάρχουν περισσότερα από 10-15 στοιχεία, το Column δημιουργεί σημαντικό φορτίο στη σύνθεση και τη μέτρηση. Το LazyColumn, αντίθετα, κάνει render μόνο τα ορατά στοιχεία και επαναχρησιμοποιεί τα αόρατα. Για μεγάλες λίστες, λίστες με χιλιάδες στοιχεία, ατελείωτες λίστες ή συνομιλίες — το LazyColumn είναι υποχρεωτικό.

Πότε το Column είναι καλύτερο: οθόνες με φόρμες (3-10 πεδία), κάρτες προφίλ, κάθετες στήλες με εικονίδια, μενού. Το Column υποστηρίζει επίσης το IntrinsicSize, που είναι χρήσιμο για προσαρμοστικό ύψος. Επιπλέον, το Column είναι πιο εύκολο στον εντοπισμό σφαλμάτων — δεν υπάρχει εικονικοποίηση, όλα τα στοιχεία είναι ορατά στο Layout Inspector. Για στατικό UI, το Column είναι η σωστή επιλογή.

Το LazyColumn παρέχει: item caching, αναγνώριση βάσει κλειδιού, κινούμενα γραφικά προσθήκης/αφαίρεσης (animateItemPlacement), sticky headers. Αν η λίστα περιέχει στοιχεία διαφορετικών τύπων (διαφορετικό viewType) — χρησιμοποιήστε LazyColumn με sealed class στα items. Το Column δεν υποστηρίζει sticky headers (πρέπει να εξομοιωθούν μέσω scrollable Column). Το LazyColumn υποστηρίζει επίσης το LazyVerticalGrid όταν χρησιμοποιείται GridCells.

Πρακτικά παραδείγματα χρήσης του Column

Ας εξετάσουμε την οθόνη προφίλ χρήστη, όπου το Column χρησιμοποιείται ως κύριο container για το avatar, όνομα, βιογραφικό και κουμπιά ενεργειών. Εδώ το Column με IntrinsicSize.Min προσαρμόζεται στο περιεχόμενο, και το weight εφαρμόζεται για την κατανομή χώρου μεταξύ των τμημάτων.

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // Avatar
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Όνομα
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Βιογραφικό
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Κουμπιά ενεργειών
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Μήνυμα") }
                OutlinedButton(onClick = { }) { Text("Ακολουθώ") }
            }
        }
    }
}

Στο παράδειγμα, το Column χρησιμοποιεί Arrangement.spacedBy(8.dp) για ομοιόμορφα διαστήματα μεταξύ των στοιχείων. horizontalAlignment = CenterHorizontally στοιχίζει το avatar, το όνομα και το βιογραφικό στο κέντρο. Το Row μέσα στο Column — ένα ένθετο container για τα κουμπιά σε μία γραμμή. Αυτός ο συνδυασμός Column (κάθετη διάταξη) και Row (οριζόντια διάταξη) είναι ένα τυπικό μοτίβο κατασκευής UI στο Compose.