Expanded: τι είναι, αρχή λειτουργίας στο Flutter

Τι είναι το Expanded

Expanded είναι ένα widget-περιτύλιγμα που δέχεται ένα child και το αναγκάζει να επεκταθεί για να γεμίσει τον διαθέσιμο χώρο σε ένα δοχείο Flex (Row, Column, Flex). Το Expanded δεν έχει δική του οπτική αναπαράσταση — διαχειρίζεται μόνο τους περιορισμούς που μεταδίδονται στο θυγατρικό στοιχείο.

Στη βάση του Expanded βρίσκεται ο μηχανισμός Flex που παρέχεται από το πλαίσιο Flutter. Όταν τα Row ή Column υπολογίζουν τις διαστάσεις των παιδιών τους, πρώτα κατανέμουν χώρο σε μη ελαστικά στοιχεία (συνήθη widgets με σταθερές διαστάσεις) και τον υπόλοιπο χώρο τον μοιράζουν μεταξύ Expanded και Flexible παιδιών αναλογικά με τους συντελεστές flex τους.

Το Expanded χρησιμοποιεί Flexible.fit = FlexFit.tight. Αυτό σημαίνει ότι το παιδί του Expanded πρέπει να καταλάβει όλο τον κατανεμημένο χώρο, ακόμα κι αν το δικό του μέγεθος είναι μικρότερο. Σε αντίθεση με το Flexible με Fit.loose, όπου το παιδί μπορεί να είναι μικρότερο από την κατανεμημένη περιοχή, το Expanded τεντώνει αναγκαστικά το περιεχόμενο.

Συμπέρασμα: το Expanded είναι το κύριο εργαλείο για τη δημιουργία αναλογικών διατάξεων στο Flutter. Χρησιμοποιήστε το όταν θέλετε ένα στοιχείο να καταλαμβάνει εγγυημένα όλο το διαθέσιμο πλάτος ή ύψος.

Expanded vs Flexible: βασικές διαφορές

Expanded και Flexible — και τα δύο κατανέμουν χώρο σε δοχεία Flex, αλλά συμπεριφέρονται θεμελιωδώς διαφορετικά. Η διαφορά έγκειται στην ιδιότητα fit, η οποία καθορίζει αν το παιδί μπορεί να είναι μικρότερο από τον διαθέσιμο χώρο.

Το Expanded έχει αυστηρό μοντέλο συμπεριφοράς: το fit του είναι ίσο με FlexFit.tight. Αυτό σημαίνει ότι το θυγατρικό widget λαμβάνει περιορισμούς ίσους με τον διαθέσιμο χώρο — ούτε περισσότερο, ούτε λιγότερο. Αν το παιδί είναι μικρότερο, τεντώνεται. Αν είναι μεγαλύτερο — συμπιέζεται. Το Flexible χρησιμοποιεί FlexFit.loose, επιτρέποντας στο θυγατρικό στοιχείο να έχει οποιοδήποτε μέγεθος εντός του κατανεμημένου χώρου.

Στην πράξη: αν μέσα σε ένα Row υπάρχουν δύο Expanded με flex=1, το καθένα θα καταλάβει ακριβώς το μισό πλάτος. Αν τα αντικαταστήσετε με Flexible με fit.loose, κάθε παιδί μπορεί να είναι μικρότερο από το μισό αν το δικό του μέγεθος είναι μικρότερο — ο υπόλοιπος χώρος θα παραμείνει κενός.

Συμπέρασμα: χρησιμοποιήστε Expanded για αυστηρές αναλογικές διατάξεις, Flexible — όταν το παιδί μπορεί να είναι μικρότερο από τον διαθέσιμο χώρο. Αν δεν είστε σίγουροι — ξεκινήστε με Expanded, δίνει πιο προβλέψιμη συμπεριφορά.

Συντελεστής Flex: πώς κατανέμεται ο χώρος

Συντελεστής Flex (παράμετρος flex) — μια αριθμητική τιμή που καθορίζει το μέρος του διαθέσιμου χώρου που θα λάβει το Expanded. Από προεπιλογή flex=1, που σημαίνει ίση κατανομή μεταξύ όλων των Expanded παιδιών.

Ο αλγόριθμος κατανομής λειτουργεί σε τρία βήματα. Πρώτο: το Flutter υπολογίζει το intrinsic size όλων των μη ελαστικών παιδιών. Δεύτερο: ο υπόλοιπος χώρος διαιρείται με το άθροισμα όλων των συντελεστών flex. Τρίτο: κάθε Expanded λαμβάνει ένα μέρος ίσο με τον συντελεστή flex του πολλαπλασιασμένο με το μέγεθος μιας μονάδας flex.

Για παράδειγμα, ένα Row πλάτους 300px περιέχει δύο Expanded: πρώτο με flex=2, δεύτερο με flex=1. Ο ελεύθερος χώρος (300px μείον τα μη ελαστικά παιδιά) χωρίζεται σε 3 μέρη. Το πρώτο παίρνει 2/3, το δεύτερο — 1/3. Αν δεν υπάρχουν μη ελαστικά παιδιά, το πρώτο θα πάρει 200px, το δεύτερο — 100px.

Ο συντελεστής flex μπορεί να είναι οποιοσδήποτε θετικός ακέραιος αριθμός. Η τιμή 0 είναι ειδική περίπτωση: Expanded με flex=0 συμπεριφέρεται σαν ένα συνηθισμένο μη ελαστικό widget, καταλαμβάνοντας ελάχιστο χώρο ανάλογα με το μέγεθος του παιδιού. Αυτή η συμπεριφορά είναι ισοδύναμη με την απουσία Expanded.

Συμπέρασμα: ο συντελεστής flex είναι το κλειδί για την κατασκευή ευέλικτων διατάξεων. Χρησιμοποιήστε αναλογίες 1:1 για ίσες στήλες, 2:1 για πάνελ με κύρια και πλευρική περιοχή, 3:1 για διεπαφές με στενή πλοήγηση.

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

Παράδειγμα 1 επιδεικνύει τη βασική χρήση Expanded σε Row για τη δημιουργία τριών ίσων στηλών.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

Σε αυτό το παράδειγμα, τρία Expanded με flex=1 (προεπιλογή) μοιράζονται το πλάτος του Row εξίσου. Τα δοχεία τεντώνονται σε όλο το ύψος που ορίζεται από το Row και καταλαμβάνουν ίσα μέρη. Αυτή η προσέγγιση είναι βολική για τη δημιουργία στηλοειδών διατάξεων με αναλογική κατανομή.

Παράδειγμα 2 δείχνει τη χρήση διαφορετικών συντελεστών flex για τη δημιουργία διάταξης με πλευρικό πάνελ και κύριο περιεχόμενο.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Πλευρικό πάνελ'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Περιοχή περιεχομένου'),
        ),
      ),
    ),
  ],
)

Το δεύτερο παράδειγμα δημιουργεί μια τυπική διάταξη με πλευρικό πάνελ (25%) και κύρια περιοχή (75%). Τα flex=1 και flex=3 δίνουν αναλογία 1:3. Όταν αλλάζει το πλάτος της οθόνης, οι αναλογίες διατηρούνται αυτόματα — αυτή είναι η βάση των προσαρμοστικών διεπαφών.

Συμπέρασμα: το Expanded με διαφορετικούς συντελεστές flex είναι το τυπικό εργαλείο για την κατασκευή προσαρμοστικών διατάξεων. Ο συνδυασμός Expanded σε Column επιτρέπει τη δημιουργία τόσο οριζόντιων όσο και κάθετων αναλογικών διατάξεων.

Τυπικά λάθη κατά τη χρήση Expanded

Λάθος 1: χρήση Expanded εκτός Row, Column ή Flex. Αν τοποθετήσετε Expanded απευθείας σε Stack, ListView ή άλλο δοχείο που δεν είναι Flex, το Flutter ρίχνει LayoutException με μήνυμα “Expanded widgets must be placed inside Flex widgets”. Λύση: ελέγξτε το γονικό widget — μόνο Row, Column ή Flex.

Λάθος 2: τοποθέτηση Expanded μέσα σε ListView χωρίς καθορισμό shrinkWrap. Το ListView από προεπιλογή έχει άπειρο ύψος προς την κατεύθυνση κύλισης και το Expanded δεν μπορεί να υπολογίσει το μερίδιό του. Λύση: χρησιμοποιήστε shrinkWrap: true ή τυλίξτε το ListView σε SizedBox με σταθερό ύψος.

Λάθος 3: πολλαπλά Expanded με συνολικό flex που υπερβαίνει τον διαθέσιμο χώρο. Αν μέσα σε ένα Row με περιορισμένο πλάτος υπάρχουν Expanded, καθώς και widgets με μεγάλο intrinsic size, μπορεί να προκύψει overflow. Λύση: ελέγξτε τις ελάχιστες διαστάσεις των μη ελαστικών παιδιών και αν χρειαστεί χρησιμοποιήστε FittedBox ή Flex fit.

Λάθος 4: ένθετα Expanded σε Column μέσα σε Row. Αν Expanded μέσα σε Column περιέχει άλλο Expanded μέσα σε Row, μπορεί να προκύψει σύγκρουση περιορισμών. Λύση: περιορίστε το βάθος ένθεσης ή χρησιμοποιήστε ConstrainedBox για ρητό καθορισμό διαστάσεων σε ενδιάμεσα επίπεδα.

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