Πώς να δημιουργήσετε μια σειρά πλήρους πλάτους στο Flutter

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

Στο Flutter, κάνοντας ένα Row Η επέκταση του γραφικού στοιχείου σε όλο το πλάτος είναι αρκετά απλή. Αυτή η ανάρτηση θα σας καθοδηγήσει στη διαδικασία δημιουργίας πλήρους πλάτους Row στο Flutter.

Γραφικό στοιχείο γραμμής

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

Χρησιμοποιήστε την ιδιότητα MainAxisSize

ο Row Το widget έχει μια ιδιότητα που ονομάζεται mainAxisSize που καθορίζει πόσο χώρο θα πρέπει να καταλαμβάνει στον κύριο άξονα (ο οποίος είναι οριζόντιος για α Row). Ορίζοντας αυτήν την ιδιότητα σε MainAxisSize.maxμπορείτε να φτιάξετε το Row όσο το δυνατόν ευρύτερα:

Row(
  mainAxisSize: MainAxisSize.max,
  children: [
    // Your widgets here
  ],
)

Ωστόσο, μόνο ρύθμιση mainAxisSize προς την MainAxisSize.max δεν εγγυάται πάντα ότι το Row θα γεμίσει το πλάτος. Εδώ μπαίνουν στο παιχνίδι άλλα γραφικά στοιχεία και ιδιότητες.

Χρησιμοποιήστε το Expanded Widget

Όταν έχετε πολλά παιδιά σε ένα Row και θέλετε να γεμίσουν το χώρο, τυλίγοντας ένα παιδί με ένα Expanded Το γραφικό στοιχείο λέει στο Flutter να αφήσει το παιδί να επεκταθεί για να γεμίσει τον διαθέσιμο χώρο:

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.blue,
        child: const Text('Full-width element within a Row'),
      ),
    ),
  ],
)

Σε αυτό το παράδειγμα, το Container καταλαμβάνει όλο τον διαθέσιμο οριζόντιο χώρο μέσα στο Row.

CrossAxisAlignment

Για να διασφαλίσετε το δικό σας Row Τα στοιχεία τεντώνονται πλήρως ως προς το πλάτος και είναι κατάλληλα ευθυγραμμισμένα κατακόρυφα, μπορείτε να τα συνδυάσετε CrossAxisAlignment με Expanded:

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
        child: const Text('Stretched full-width Row with CrossAxisAlignment'),
      ),
    ),
  ],
)

ο crossAxisAlignment: CrossAxisAlignment.stretch διασφαλίζει ότι τυχόν θυγατρικά γραφικά στοιχεία που δεν έχουν σταθερό ύψος θα τεντωθούν για να γεμίσουν το Row κάθετα.

Σειρά πλήρους πλάτους με διπλό.άπειρο

Δείτε πώς μπορείτε να φτιάξετε ένα Row πλήρους πλάτους περικλείοντάς το μέσα σε α Container και ρυθμίζοντας το πλάτος του σε double.infinity:

Container(
  width: double.infinity,
  color: Colors.blueGrey, // Just for visibility
  child: const Row(
    children: [
      Text('Full-width Row using double.infinity'),
      // More widgets can be added here
    ],
  ),
)

Σε αυτό το παράδειγμα, το Container ενθυλακώνοντας το Row θα επεκταθεί σε όλο το πλάτος της οθόνης, δημιουργώντας έτσι το Row εμφανίζονται σε όλο το πλάτος.

Δημιουργία πλήρους πλάτους Row στο Flutter είναι απαραίτητο για την ανάπτυξη διατάξεων με απόκριση και οπτικά ελκυστικές. Με το χειρισμό του mainAxisSize ιδιοκτησία και χρήση γραφικών στοιχείων όπως Expandedμπορείτε να ελέγξετε πώς σας Row συμπεριφέρεται ως προς το πλάτος.