Πώς να ορίσετε το πλάτος και το ύψος της σειράς στο Flutter

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

Εδώ είναι που το SizedBox το widget γίνεται ανεκτίμητο. Σε αυτήν την ανάρτηση, θα διερευνήσουμε πώς να ορίσετε ένα συγκεκριμένο πλάτος και ύψος για α Row στο Flutter χρησιμοποιώντας SizedBox.

SizedBox

SizedBox είναι ένα απλό κουτί με καθορισμένο μέγεθος. Μπορεί να αναγκάσει το θυγατρικό γραφικό στοιχείο του να έχει συγκεκριμένο πλάτος ή/και ύψος, καθιστώντας το ιδανικό για να δίνει διαστάσεις Row widgets που διαφορετικά θα ήταν τόσο μεγάλα όσο επιτρέπουν τα παιδιά τους.

Ορίστε το πλάτος και το ύψος για μια σειρά

Χρησιμοποιώντας SizedBox να τυλίξετε το δικό σας Row είναι ο ευκολότερος τρόπος για να ρυθμίσετε και το πλάτος και το ύψος.

Σταθερές διαστάσεις για μια σειρά

Εάν χρειάζεστε το Row για να είναι ένα σταθερό μέγεθος που δεν είναι απαραίτητα πλήρες πλάτος ή ύψος, μπορείτε να ορίσετε συγκεκριμένες διαστάσεις.

SizedBox(
  width: 250.0, // Fixed width of 250 logical pixels
  height: 150.0, // Fixed height of 150 logical pixels
  child: Row(
    children: [
      // Your row content
    ],
  ),
)

Αυτό SizedBox αναγκάζει το Row να έχει πλάτος 250 pixel και ύψος 150 pixel, ανεξάρτητα από το περιεχόμενό του.

Σειρά πλήρους πλάτους με σταθερό ύψος

SizedBox(
  width: double.infinity, // As wide as the screen
  height: 100.0, // Fixed height of 100 logical pixels
  child: Row(
    children: [
      // Your row content
    ],
  ),
)

Σε αυτό το παράδειγμα, το Row θα εκτείνεται σε όλο το πλάτος της οθόνης και θα έχει σταθερό ύψος 100 pixel.

Ορισμός ρητών διαστάσεων για α Row στο Flutter είναι μια κοινή απαίτηση για ακριβή έλεγχο διάταξης. Περιτύλιγμα α Row σε ένα SizedBox παρέχει έναν εύκολο και αποτελεσματικό τρόπο για να επιτευχθεί αυτό.

Χρησιμοποιώντας ένα SizedBox προσφέρει ένα μείγμα απλότητας και ελέγχου, επιτρέποντας στους προγραμματιστές Flutter να σχεδιάζουν διεπαφές που είναι ταυτόχρονα όμορφες και λειτουργικά ισχυρές.