Πώς να χρησιμοποιήσετε το Flex στη σειρά Flutter

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

Γιατί το Flex Matters

Πρώτα απ ‘όλα, γιατί πρέπει να σας ενδιαφέρει καν το flex ιδιοκτησία? Η απάντηση είναι απλή. ο flex Η ιδιότητα σάς επιτρέπει να διανέμετε δυναμικά τον διαθέσιμο χώρο μεταξύ των θυγατρικών γραφικών στοιχείων, δίνοντάς σας μεγαλύτερο έλεγχο στις διατάξεις σας. Αυτή η ιδιότητα είναι το κλειδί σας για ανταποκρινόμενο σχεδιασμό.

Βασική χρήση του Flex in Row

Ας ξεκινήσουμε με ένα απλό παράδειγμα για να δείξουμε πώς flex λειτουργεί με α Row.

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

Σε αυτό το παράδειγμα, χρησιμοποιούμε το Expanded widget για περιτύλιξη Container widgets. ο flex ιδιοκτησία έχει οριστεί σε 1 για τον πρώτο Container και 2 για το δεύτερο. Αυτό σημαίνει ότι το δεύτερο Container θα πιάνει διπλάσιο χώρο σε σύγκριση με το πρώτο.

Παράδειγμα προηγμένου Flex

Τώρα που έχετε κατεβάσει τα βασικά, ας ελέγξουμε ένα ελαφρώς πιο περίπλοκο παράδειγμα.

Row(
  children: [
    Flexible(
      flex: 1,
      child: Container(color: Colors.blue),
    ),
    const Spacer(flex: 1),
    Flexible(
      flex: 2,
      child: Container(color: Colors.yellow),
    ),
  ],
)

Εδώ, χρησιμοποιούμε και τα δύο Flexible και Spacer widgets στη σειρά. Ενώ Flexible επιτρέπει στο παιδί να καταλάβει διαθέσιμο χώρο, Spacer λειτουργεί ως κενός χώρος που μπορεί επίσης να ρυθμιστεί χρησιμοποιώντας flex.

Σε αυτό το παράδειγμα, το Spacer με flex του 1 απομακρύνει τα δοχεία, ενώ τα ίδια τα δοχεία προσαρμόζουν τα πλάτη τους με βάση το δικό τους flex αξίες.

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