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

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

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

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

Το μέγεθος του Box καθορίζεται από τον κανόνα: αν κανένα θυγατρικό στοιχείο δεν έχει σταθερό μέγεθος, το Box συμπυκνώνεται σε ελάχιστο μέγεθος. Αν τουλάχιστον ένα θυγατρικό στοιχείο έχει Modifier.fillMaxSize, το Box επεκτείνεται σε μέγιστο μέγεθος.

Σύμφωνα με Android Developers Blog, 2024, το Box είναι το πιο αποδοτικό container στο Compose για περιπτώσεις όπου τα στοιχεία δεν απαιτούν σειριακή διαταξη. Το Box δεν εκτελεί επιπλέον μετρήσεις για τοποθέτηση, σε αντίθεση με το Row και Column.

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

Box δέχεται παραμέτρους modifier, contentAlignment και propagateMinConstraints. Όλα τα θυγατρικά στοιχεία μεταφέρονται στο μπλοκ content, όπου κάθε ένα μπορεί να έχει τα δικά του modifiers.

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(200.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.fillMaxSize().background(Color.Blue)
        )
        Text(
            text = "Γεια",
            color = Color.White
        )
    }
}

ContentAlignment και Modifier.align στο Box

contentAlignment — είναι μια παράμετρος του Box που καθορίζει την προκαθορισμένη στοίχιση για όλα τα θυγατρικά στοιχεία. Αν δεν καθοριστεί, χρησιμοποιείται Alignment.TopStart — τα στοιχεία τοποθετούνται στην πάνω αριστερή γωνία του container.

Modifier.align επιτρέπει την παρακοπή της στοίχισης για ένα συγκεκριμένο θυγατρικό στοιχείο ανεξάρτητα από το contentAlignment. Για παράδειγμα, ένα Box με Alignment.Center μπορεί να περιέχει ένα στοιχείο με Modifier.align(Alignment.BottomEnd) που θα είναι κολλημένο στην κάτω δεξιά γωνία.

Σύμφωνα με Material Design Guidelines, 2025, το Modifier.align είναι χρήσιμο για τοποθέτηση σημαιών και εικονιδίων πάνω σε εικόνες φόντου. Επιτρέπει την ρύθμιση μιας γενικής στοίχισης για όλο το περιεχόμενο του Box και την παρακοπή της για μμεμονωμένα στοιχεία.

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

Παράδειγμα με Modifier.align

Σε αυτό το παράδειγμα το Box περιέχει μια εικόνα φόντου και ένα σήμα στην κάτω δεξιά γωνία. Το Modifier.align(BottomEnd) τοποθετεί το σήμα ανεξάρτητα από το contentAlignment όλου του Box.

@Composable
fun BadgeExample() {
    Box(
        modifier = Modifier.size(120.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.size(100.dp).background(Color.Gray)
        )
        Box(
            modifier = Modifier
                .size(30.dp)
                .align(Alignment.BottomEnd)
                .background(Color.Red, CircleShape)
        )
    }
}

Διαχείριση επιπέδων με zIndex

Modifier.zIndex διαχειρίζεται τη σειρά σχεδίασης στοιχείων μέσα στο Box. Από προκαταβολή, τα στοιχεία σχεδιάζονται με σειρά δήλωσης — το πρώτο στοιχείο κάτω, το τελευταίο πάνω. Το zIndex αλλάζει αυτή τη σειρά.

Ένα στοιχείο με zIndex 2.0f σχεδιάζεται πάνω από ένα στοιχείο με zIndex 1.0f, ανεξάρτητα από τη σειρά τους στον κώδικα. Οι αρνητικές τιμές zIndex τοποθετούν το στοιχείο κάτω από τα υπόλοιπα. Σύμφωνα με Android Developers, 2024, το zIndex επηρεάζει μόνο τη σειρά σχεδίασης, όχι την επεξεργασία συμβάντων αφής.

zIndex είναι ιδιαίτερα χρήσιμο σε κινητικά και draggable στοιχεία, όπου ένα στοιχείο πρέπει να ανυψωθεί προσωρινά πάνω από τα άλλα. Για παράδειγμα, κατά το σύρσιμο μιας κάρτας, το zIndex της αυξάνεται για να μην καλύπτεται από γειτονικά στοιχεία.

@Composable
fun ZIndexExample() {
    Box(modifier = Modifier.size(150.dp)) {
        Box(modifier = Modifier.size(80.dp)
            .align(Alignment.TopStart)
            .zIndex(2.0f)
            .background(Color.Green))
        Box(modifier = Modifier.size(100.dp)
            .align(Alignment.Center)
            .zIndex(1.0f)
            .background(Color.Blue))
    }
}

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

Box χρησιμοποιείται ευρέως για τοποθέτηση κειμένου πάνω σε εικόνα. Η εικόνα φόντου τοποθετείται πρώτη, έπειτα το κείμενο με Modifier.align για τοποθέτηση πάνω στο φόντο.

@Composable
fun ImageWithOverlay() {
    Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
        Image(
            painter = painterResource(R.drawable.photo),
            contentDescription = "Photo",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        Box(
            modifier = Modifier.fillMaxSize()
                .background(Color.Black.copy(alpha = 0.4f))
        )
        Text(
            text = "Τίτλος",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

Το δεύτερο παράδειγμα — Box για δημιουργία δείκτη φόρτωσης. Το Box καταλαμβάνει όλη την περιοχή οθόνης, και το CircularProgressIndicator κεντράρεται μέσω contentAlignment.

@Composable
fun LoadingOverlay() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(48.dp)
        )
    }
}

Περιορισμοί μεγέθους του Box

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

Modifier.clipToBounds περιορίζει τη σχεδίαση των θυγατρικών στοιχείων στα όρια του Box. Χωρίς αυτό το modifier, τα θυγατρικά στοιχεία μπορούν να βγουν εκτός Box. Σύμφωνα με Material Design Guidelines, 2025, το clipToBounds είναι υποχρεωτικό κατά τη χρήση Modifier.scale ή Modifier.graphicsLayer μέσα σε ένα Box.

propagateMinConstraints — είναι μια παράμετρος του Box που μεταβίβει τους ελάχιστους περιορισμούς μεγέθους στα θυγατρικά στοιχεία. Αν είναι true, τα θυγατρικά στοιχεία δεν μπορούν να είναι μικρότερα από το ελάχιστο μέγεθος του Box. Αυτή η συμπεριφορά είναι σημαντική κατά τη δημιουργία προσαρμοσμένων container με σταθερά ελάχιστα μεγέθη.

• Box — ελάχιστο container αν δεν έχουν οριστεί μεγέθη και δεν υπάρχουν θυγατρικά στοιχεία με fillMaxSize
• Modifier.clipToBounds αποτρέπει τη διαφυγή περιεχομένου εκτός των ορίων του Box
• propagateMinConstraints μεταβίβει τους ελάχιστους περιορισμούς στα θυγατρικά στοιχεία