Διάρρηξη διατάξεων σε γραμμές και στήλες στο Flutter

Αν έχετε διαβάσει για το Flutter ακόμα και για 5 λεπτά, πρέπει να έχετε σκόνταψε στα Widgets. Και το πιο δημοφιλές γεγονός "In Flutter, σχεδόν όλα είναι ένα widget".

Ναι, όλα.

Ορίζω Widgets ως τα στοιχεία ή τα μπλοκ που ορίζουν τη διεπαφή χρήστη. Το AppBar είναι ένα γραφικό στοιχείο, το κείμενο σε αυτό είναι ένα γραφικό στοιχείο, το στυλ που εφαρμόζετε στο κείμενο είναι ένα γραφικό στοιχείο, ακόμα και η ευθυγράμμιση του κειμένου θα μπορούσε να καλείται ως γραφικό στοιχείο. Στο Flutter, οτιδήποτε είναι μια προβολή ή συνεισφέρει σε μια ιδιότητα της προβολής είναι widget.

Μπορώ να συνεχίσω και για widgets, αλλά για να απλοποιήσω, εδώ είναι μια συνιστώμενη λίστα widgets που πρέπει να ξέρετε για να χτίσετε μια εφαρμογή στο Flutter. Για γρήγορη αναφορά, δείτε παρακάτω.

Εστιάζοντας σε σειρές και στήλες

Στο Flutter, μπορείτε να σπάσετε σχεδόν το 90% των σχεδίων διάταξης σε Γραμμές και Στήλες. Περιστασιακά, θα πρέπει να χρησιμοποιήσετε άλλα widgets όπως Stack, Grid κ.λπ., αλλά από το βασικό επίπεδο, θα απαιτήσετε σειρές και στήλες σε κάποιο μπλοκ UI ή το άλλο.

Έτσι γραμμές και στήλες είναι ...

Όταν υπάρχουν στοιχεία τοποθετημένα δίπλα-δίπλα ή οριζόντια αριστερά / δεξιά ενός άλλου στοιχείου, χρειάζεστε σειρές.

Όταν υπάρχουν στοιχεία τοποθετημένα το ένα μετά το άλλο ή κάθετα πάνω / κάτω σε άλλο στοιχείο, χρειάζεστε Στήλες.

Αρκετά βασικό, σωστά;

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

Ας οικοδομήσουμε κάποια UI

Ώρα να βουτήξουμε στον κώδικα και να χτίσουμε μερικά αρκετά δημοφιλή συστατικά στοιχεία και να δούμε πώς οι σειρές και οι στήλες ταιριάζουν εδώ. Για το πρώτο σχέδιο, θα αναπαραστήσουμε το στοιχείο λίστας οθόνης WhatsApp Chats. Κάτι παρόμοιο με την παρακάτω εικόνα.

Διάταξη διάταξης # 1

Πόσα στοιχεία ή απόψεις βλέπουμε λοιπόν; Εικόνα προφίλ. Ονομα χρήστη. Το τελευταίο μήνυμα του χρήστη. Ώρα του τελευταίου μηνύματος. Και αριθμός μη αναγνωσμένων μηνυμάτων.

Αφήστε να τυλίξετε όλα αυτά μέσα σε ένα δοχείο και να έχετε τρία τμήματα παιδιών: leftSection, middlesection και rightSection, το ένα μετά το άλλο οριζόντια.

leftSection θα περιέχει την εικόνα προφίλ.
το middlesection θα έχει lastMessage κάτω από το userName.
rightSection θα έχει unreadMessageCount κάτω από timeStamp.

Εντάξει. Ήταν τόσο δύσκολο;
Ίσως στην αρχή, αλλά μόλις πάρετε το κρέμονται από σειρές και στήλες, μπορείτε φυσικά να σπάσει τις διατάξεις στο κεφάλι σας.

Ώρα να κωδικοποιηθώ

Σε αντίθεση με τα περισσότερα tutorials για αρχάριους, θα προσπαθήσω πάντα να καταρρίψω τον κώδικα μου σε διαφορετικές κατηγορίες και widgets. Κάνει τον κώδικα εξαιρετικά αναγνώσιμο.

main.dart

void main () => runApp (νέο MyApp ());

class MyApp επεκτείνει το StatelessWidget {
  // Αυτό το γραφικό στοιχείο είναι η ρίζα της εφαρμογής σας.
  @καταπατώ
  Δημιουργία εικονιδίου widget (περιβάλλον BuildContext) {
    επιστροφή υλικούApp (
      home: νέο ChatItemScreen (), // καλώντας chat_screen_item.dart
    ) ·
  }}
}}

Συμβουλή για αρχάριους: Μην ξεχάσετε να εισαγάγετε τις κατηγορίες που θα χρησιμοποιήσετε. Έτσι, για παράδειγμα, το main.dart θα εισαγάγει chat_screen_item.dart με την τάξη ChatItemScreen.

chat_item_screen.dart

class ChatItemScreen επεκτείνει το StatelessWidget {
  @καταπατώ
  Δημιουργία εικονιδίου widget (περιβάλλον BuildContext) {
    επιστροφή νέου ικριώματος (
      appBar: νέο AppBar (
        τίτλος: νέο κείμενο ("στοιχείο συνομιλίας"),
        backgroundColor: Colors.lightGreen,
      ),
      body: new ChatItem (), // καλώντας chat_item.dart
    ) ·
  }}
}}

Αυτό ήταν μόνο για να ξεκινήσετε, έτσι ώστε να μην σκοντάψετε τα βασικά σας βήματα. Τώρα προχωρούμε στον κύριο κώδικα. Η τάξη ChatItem θα επιστρέψει ένα widget Container που έχει παιδί Row. Αυτό το παιδί Row θα έχει τρία νέα widgets leftSection, middleSection και rightSection τα οποία σύντομα θα κατασκευάσουμε.

chat_item.dart

class ChatItem επεκτείνει το StatelessWidget {

  τελικό leftSection = νέο Container ();
  τελικό middlesection = νέο κοντέινερ ();
  τελικό rightSection = νέο κοντέινερ ();

  @καταπατώ
  Δημιουργία εικονιδίου widget (περιβάλλον BuildContext) {
    επιστροφή νέου ικριώματος (
    σώμα: νέο εμπορευματοκιβώτιο (
      παιδί: νέα γραμμή (
        παιδιά:  [
          leftSection,
          middlesection,
          rightSection
        ],
      ),
    ),
  ) ·

  }}

}}

Αριστερή ενότητα

Στο αριστερό τμήμα, χρειαζόμαστε ένα CircleAvatar, και έχουμε ένα ωραίο μικρό widget για αυτό επίσης.

τελικό leftSection = νέο εμπορευματοκιβώτιο (
  παιδί: νέο CircleAvatar (
    backgroundImage: νέο NetworkImage (url),
    backgroundColor: Colors.lightGreen,
    ακτίνα: 24,0,
  ),
) ·

Μέση Ενότητα

Τώρα μέσα στο κοντέινερ middleSection, δημιουργούμε μια στήλη δύο widget κειμένου που θα κρατά το περιεχόμενο χρήστηName και lastMessage.

τελικό middlesection = νέο εμπορευματοκιβώτιο (
  παιδί: νέα στήλη (
    παιδιά:  [
      νέο κείμενο ("Όνομα"),
      νέο κείμενο ("Hi whatsup?"),
    ],
  ),
) ·

Κάνει το έργο της τοποθέτησης widgets το ένα μετά το άλλο, αλλά φαίνεται πραγματικά άσχημο. Ώρα να προσθέσετε κάποια εξωραϊσμό.

τελική middlesection = νέα επέκταση (
  παιδί: νέο εμπορευματοκιβώτιο (
    padding: νέο EdgeInsets.only (αριστερά: 8.0),
    παιδί: νέα στήλη (
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      παιδιά:  [
        νέο κείμενο ("Όνομα",
          στυλ: νέο TextStyle (
              χρώμα:
              fontWeight: FontWeight.w600,
              fontSize: 16.0,
          ),
        νέο κείμενο ("Hi whatsp?", στυλ:
          νέα TextStyle (χρώμα: Colors.grey),),
      ],
    ),
  ),
) ·
  • Επεκταμένη: Επειδή αυτή η ενότητα θέλει όλο το ελεύθερο διαθέσιμο χώρο, τυλίγουμε ολόκληρο το κοντέινερ σε αυτό το εκτεταμένο γραφικό στοιχείο. Χωρίς αυτό, η διάταξη θα μοιάζει με αυτό -
  • Padding: Περισσότερος χώρος για να αναπνεύσει, woah.
  • TextStyle: Δίνει το στυλ στο κείμενο, όπως χρώματα, fontSize, κλπ. Τόσο σαν το CSS, βλασφημία.
  • Τώρα μπορώ να εξηγήσω το crossAxisAlignment και mainAxisAlignment, αλλά δεν μπορώ να το εξηγήσω καλύτερα από αυτό το βίντεο. Θα σας πρότεινα να μάθετε από τα καλύτερα. (Ελέγξτε από τις 2:00 έως τις 7:30 για να πάρετε μια γρήγορη αναφορά στο θέμα στο οποίο βρισκόμαστε)

Δεξί τμήμα

Είμαστε σχεδόν τελειωμένοι. Απλά πρέπει να δημιουργήσετε μια άλλη στήλη από δύο widgets. Αυτή τη φορά, τα παιδικά γραφικά στοιχεία θα είναι ένα Textwidget για χρονική σήμανση και ένα άλλο μικρό CircleAvatar για την καταμέτρηση.

τελικό rightSection = νέο εμπορευματοκιβώτιο (
  παιδί: νέα στήλη (
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    παιδιά:  [
      νέο κείμενο ("9:50",
          στυλ: νέο TextStyle (
            χρώμα: Colors.lightGreen,
          fontSize: 12.0)),
      νέο CircleAvatar (
        backgroundColor: Colors.lightGreen,
        ακτίνα: 10,0,
        παιδί: νέο κείμενο ("2",
        στυλ: νέο TextStyle (χρώμα: χρώματα,
        fontSize: 12.0)),
      )
    ],
  ),
) ·

Τώρα εκτελέστε αυτό το όμορφο πράγμα. Και είναι έτοιμο.

Μήπως θα καταρρεύσει μια άλλη διάταξη μόνο για να βεβαιωθείτε ότι παίρνετε το κρέμονται από αυτό;

Διάταξη διάταξης # 2

Κάρτα συλλογής Zomato

Έχουμε λοιπόν αυτή την απλή διάταξη καρτών που έχει μια στήλη με λίγα widget κειμένου που επικαλύπτουν μια εικόνα φόντου. Χμμμ .. είπατε ότι επικαλύπτονται; Αυτό σημαίνει ότι χρησιμοποιούμε τους Stacks εδώ;

ΝΑΙ, το παίρνετε.

Έτσι, αντί του αριστερού, μέσου ή δεξιού τμήματος, ας καταρρίψουμε αυτή τη διάταξη σε backgroundImage και onTopContent.

@καταπατώ
Δημιουργία εικονιδίου widget (περιβάλλον BuildContext) {

  επιστροφή νέου εμπορευματοκιβωτίου (
    padding: νέο EdgeInsets.all (8.0),
    ύψος: 250,0,
    παιδί: νέα στοίβα (
      παιδιά:  [
        εικόνα φόντου,
        onTopContent
      ],
    ),
  ) ·
}}

Εικόνα φόντου

Τώρα, η εικόνα φόντου θα έχει απλώς ένα κοντέινερ με εικόνα φόντου και ένα φίλτρο χρώματος για να σκουρύνει το φόντο.

final backgroundImage = νέο κοντέινερ (
    διακόσμηση: νέο BoxDecoration (
      εικόνα: νέα DecorationImage (
        colorFilter: νέα ColorFilter.mode (
            Colors.black.withOpacity (0.6),
            BlendMode.luminosity),
        εικόνα: νέα NetworkImage (url),
        ταιριάζει: BoxFit.cover,
      ),
    ),
) ·

Στο Κορυφαίο Περιεχόμενο

Τι νομίζετε; Γραμμές ή στήλες;

Το έχεις. Κολουθιά.

τελικό στοTopContent = νέο κοντέινερ (
  ύψος: 80,0,
  παιδί: νέα στήλη (mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceΑκόμα,
    crossAxisAlignment: CrossAxisAlignment.start,
    παιδιά:  [
      νέο κείμενο ("Προσαρμογή αυτή την εβδομάδα",
      στυλ: bigHeaderTextStyle),
      νέο κείμενο ("Τα πιο δημοφιλή εστιατόρια στην πόλη αυτή την εβδομάδα",
        style: descTextStyle),
      νέο εμπορευματοκιβώτιο (
        ύψος: 2,0,
        πλάτος: 150,0,
        χρώμα: Χρώματα.έκθεση,
      ),
      νέο κείμενο ("30 θέσεις",
        style: footerTextStyle),
      // new Container ()
    ],
  ),
) ·

Τώρα μην εκπλαγείτε από τα στυλ που έχω χρησιμοποιήσει. Αυτά δεν είναι προεπιλογές Flutter, ξέρω ότι έχετε λάθη. Όλα τα στυλ για την κάρτα zomato καθορίζονται εδώ.

Μπορείτε ακόμη να βρείτε ολόκληρο το αποθετήριο GitHub για αυτές τις διατάξεις.

Στο μέλλον, θα διερευνήσω πιο σύνθετες διατάξεις που μπορείτε να σπάσετε στο ριζικό επίπεδο. Φυσικά, θα χρειαστείτε περισσότερα widgets για πιο σύνθετες διατάξεις, αλλά οι γραμμές και οι στήλες θα έχουν πάντα κάποιο ρόλο σε αυτό κάπου έτσι είναι σημαντικό να το παίρνετε αυτό στο μυαλό σας.

Διαβάστε τα άλλα μου άρθρα σχετικά με το Flutter

Το πτερύγιο είναι φρέσκο ​​και τώρα το ανακαλύπτω ο ίδιος. Αν βρείτε κάτι λάθος με τον κώδικα ή την προσέγγισή μου, το αναφέρω στα σχόλια, θα ήθελα να βελτιώσω.
Εάν μάθατε ακόμη και ένα πράγμα ή δύο, χτυπήστε τα χέρια σας όσες φορές μπορείτε για να δείξετε την υποστήριξή σας!
Hello World, είμαι ο Pooja Bhaumik. Ένας δημιουργικός δημιουργός και ένας λογικός σχεδιαστής. Μπορείτε να με βρείτε στο Linkedin ή να με παρακολουθήσετε στο GitHub ή ακολουθήστε με στο Twitter; Αν αυτό είναι πολύ κοινωνικό για σας, απλώς αφήστε ένα μήνυμα στο pbhaumik26@gmail.com αν θέλετε να μιλήσετε με την τεχνολογία μαζί μου.