MDC-102: Δομή υλικού και διάταξη

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

Δημιουργήστε έναν λογαριασμό προγραμματιστή Google Play

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

Αποδεχτείτε τους γενικούς όρους πώλησης (GTC).

Προσθέστε μια ωραία φωτογραφία του εαυτού σας.

Δημιουργήστε έναν λογαριασμό προγραμματιστή Google Play

Η διαδικασία για τη δημιουργία ενός λογαριασμού προγραμματιστή Google Play είναι πολύ απλούστερη από την Apple.

Συνδεθείτε με τη διεύθυνση Gmail σας.

Αποδεχτείτε το GTC.

Ρυθμίστε τα τέλη εγγραφής: μία μόνο πληρωμή 25 ευρώ για να δημοσιεύσετε όλες τις εφαρμογές της επιλογής σας !

Ενημερώστε τις πληροφορίες σχετικά με τον λογαριασμό σας: Όνομα προγραμματιστή, διεύθυνση email και αριθμός τηλεφώνου.

Αυτό έχει απαντήσει στην ερώτησή σας ?

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

Τελευταία ενημέρωση στις 9 Νοεμβρίου 2021

Συναφή άρθρα

• Δημιουργήστε μια εφαρμογή στην κονσόλα Google Play
• Δημιουργήστε το πιστοποιητικό Android P12
• Εξαγωγή του αρχείου APK ή AAB
• Δημοσιεύστε μια εφαρμογή Android
• Δημοσιεύστε μια εφαρμογή Android έξω από το κατάστημα Play
• Δημοσίευση στο Google Play Store

MDC-102: Δομή υλικού και διάταξη

Τα εξαρτήματα υλικών (MDC) βοηθούν τους προγραμματιστές να εφαρμόσουν τον σχεδιασμό υλικού. Σχεδιασμένο από μια ομάδα μηχανικών και ειδικών εμπειριών χρήστη στο Google, το MDC προσφέρει δεκάδες κομψά και λειτουργικά στοιχεία διεπαφής χρήστη. Διατίθεται για το Android, το iOS, το Web και το Flutter.υλικό.IO/ανάπτυξη.

Στο εργαστήριο προγραμματισμού MDC-101, χρησιμοποιήσατε δύο στοιχεία στοιχείων υλικών για να δημιουργήσετε μια σελίδα σύνδεσης: πεδία κειμένου και κουμπιά που περιλαμβάνουν κινούμενα σχέδια “μελανιού”. Σε αυτές τις βάσεις, ας εμπλουτίσουμε την αίτησή μας προσθέτοντας πλοήγηση, δομή και δεδομένα.

Στόχοι εργαστηρίου

Σε αυτό το εργαστήριο προγραμματισμού, θα δημιουργήσετε μια αρχική οθόνη για Ναός, Μια αίτηση ηλεκτρονικού εμπορίου για την πώληση ρούχων και αντικειμένων για το σπίτι. Αυτή η οθόνη θα περιέχει:

• Μια υψηλότερη γραμμή εφαρμογής
• Μια λίστα προϊόντων με τη μορφή πλέγματος

Λάβετε υπόψη ότι αυτό το εργαστήριο προγραμματισμού αντικαταστάθηκε από το υλικό 3, με εξαίρεση τα στιγμιότυπα οθόνης. Ωστόσο, μεταφέρουν τις ίδιες πληροφορίες.

Αυτό το εργαστήριο προγραμματισμού είναι το δεύτερο από τα τέσσερα εργαστήρια που θα σας βοηθήσουν να δημιουργήσετε μια εφαρμογή για ένα προϊόν που ονομάζεται Sanctuary. Σας συνιστούμε να ακολουθήσετε όλα τα εργαστήρια προγραμματισμού προκειμένου να προχωρήσετε στα καθήκοντα σιγά -σιγά. Θα βρείτε τα εργαστήρια προγραμματισμού σας εδώ:

• MDC-101 Flutter: Βασικές αρχές των υλικών εξαρτημάτων
• MDC-103 Flutter: Χρήση θεμάτων σχεδιασμού υλικού (χρώμα, σχήματα, ανύψωση και τύπος)
• MDC-104 Flutter: Advanced Material Design Components

Υλικά πτερυγιακά στοιχεία και υποσυστήματα σε αυτό το εργαστήριο προγραμματισμού

• Ανώτερος
• Πλέγματα
• Καρτέλλες

Σε αυτό το εργαστήριο προγραμματισμού, θα χρησιμοποιήσετε τα προεπιλεγμένα στοιχεία που παρέχονται από το υλικό Flutter. Θα μάθετε να τα προσαρμόσετε στην ενότητα MDC-103: Χρήση θεμάτων σχεδιασμού υλικού (χρώμα, σχήματα, ανύψωση και τύπος).

Πώς θα αξιολογούσατε το επίπεδο εμπειρίας σας στην ανάπτυξη με το Flutter ?

2. Διαμορφώστε το περιβάλλον ανάπτυξης πτερυγίων

Για αυτό το εργαστήριο, χρειάζεστε δύο λογισμικό: το Flutter SDK και έναν εκδότη.

Μπορείτε να εκτελέσετε το εργαστήριο προγραμματισμού σε μία από τις ακόλουθες συσκευές:

• Μια συσκευή Android ή Physical iOS συνδεδεμένη στον υπολογιστή σας και ρυθμίζεται σε λειτουργία προγραμματιστή.
• Ο προσομοιωτής iOS (εργαλεία Xcode για εγκατάσταση).
• Ο εξομοιωτής Android (ο οποίος πρέπει να ρυθμιστεί στο Android Studio).
• Ένα πρόγραμμα περιήγησης (Chrome απαιτείται για εντοπισμό σφαλμάτων).
• Ως Windows, Linux ή MacOS Desktop. Πρέπει να αναπτύξετε την αίτησή σας στην πλατφόρμα όπου σκοπεύετε να την αναπτύξετε. Για παράδειγμα, εάν θέλετε να αναπτύξετε μια εφαρμογή Desktop Windows, πρέπει να το κάνετε στα Windows για να αποκτήσετε πρόσβαση στην κατάλληλη αλυσίδα συλλογής. Μάθετε επίσης για τις συγκεκριμένες απαιτήσεις για λειτουργικά συστήματα, τα οποία αναφέρονται λεπτομερώς στα έγγραφα.ταραχή.Dev/desktop.

3. Κατεβάστε την εφαρμογή αναχώρησης για το εργαστήριο προγραμματισμού

Έχετε ήδη ακολουθήσει το εργαστήριο MDC-101 ?

Εάν έχετε τελειώσει το εργαστήριο προγραμματισμού MDC-101, ο κωδικός σας θα πρέπει να είναι έτοιμος να ξεκινήσει αυτό το εργαστήριο. Μεταβείτε στο επόμενο στάδιο: Προσθέστε μια υψηλότερη γραμμή εφαρμογής.

Ξεκινάτε από το μηδέν ?

Κατεβάστε την αίτηση αναχώρησης εκκίνησης εργαστηρίου

Η εφαρμογή εκκίνησης βρίσκεται στο υλικό-συστατικό-flutter-codelabs-102-starter_and_101-complete/mdc_100_series .

… Ή κλωνοποιήστε το εργαστήριο από το GitHub

Για να κλωνοποιήσετε αυτό το εργαστήριο προγραμματισμού από το GitHub, εκτελέστε τις ακόλουθες εντολές:

Git clone https: // github.Com/υλικό-συστατικά/υλικά-συστατικά-flutter-codelabs.GIT CD υλικό-συστατικά-flutter-codelabs/mdc_100_series git checkout 102-starter_and_101-complete

Για βοήθεια, δείτε το τμήμα κλωνοποίησης από το GitHub

Επιλέξτε το σωστό υποκατάστημα

Τα εργαστήρια προγραμματισμού MDC-101 στα 104 βασίζονται μεταξύ τους. Έτσι, όταν ολοκληρώσετε τον κωδικό για το εργαστήριο MDC-102, γίνεται ο κώδικας εκκίνησης του εργαστηρίου MDC-103. Ο κώδικας χωρίζεται σε διάφορους κλάδους, τα οποία μπορείτε να εμφανίσετε τη λίστα χρησιμοποιώντας αυτήν την εντολή:

Branch -List

Για να εμφανίσετε τον τελικό κώδικα, μεταβείτε στον κλάδο 103-Starter_and_102-Complete .

Ανοίξτε το έργο και εκτελέστε την εφαρμογή

1. Ανοίξτε το έργο στον εκδότη της επιλογής σας.
2. Ακολουθήστε τις οδηγίες σχετικά με τον εκδότη που έχετε επιλέξει. Είναι προσβάσιμα στην παράγραφο “Εκτέλεση της εφαρμογής” (Εκτελέστε την εφαρμογή) στη σελίδα DIDICE START> TEST (FIRST STEGS> TEST).

Επιτυχής λειτουργία. Η σελίδα σύνδεσης Sanctuary από το εργαστήριο προγραμματισμού MDC-101 πρέπει να εμφανίζεται στη συσκευή σας.

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

4. Προσθέστε μια υψηλότερη γραμμή εφαρμογής

Προς το παρόν, εάν κάνετε κλικ στο κουμπί “Επόμενο”, η αρχική οθόνη εμφανίζεται με το μήνυμα “το κάνατε!”(Κατάφερες.Ουσία. Τέλειος. Ωστόσο, ο χρήστης μας δεν έχει τίποτα να κάνει και δεν ξέρει πού βρίσκεται στην εφαρμογή. Για να σας βοηθήσουμε, ήρθε η ώρα να προσθέσετε πλοήγηση.

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

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

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

Μπορεί να γνωρίζετε αυτό το στοιχείο με το όνομα “Bar Navigation Bar” κάτω από το iOS, ή απλά “γραμμή εφαρμογών” ή “κεφαλίδα”.

Για να προσφέρετε στους χρήστες γρήγορη πρόσβαση σε άλλες ενέργειες, ας προσθέσουμε μια υψηλότερη γραμμή εφαρμογών.

Προσθέστε ένα widget appbar

Στο σπίτι.Dart, προσθέστε ένα appbar σε “ικρίωμα”, στη συνέχεια διαγράψτε το const που επισημάνθηκε:

Επιστρέψτε το Const Scaffold (// TODO: Προσθήκη γραμμής εφαρμογών (102) AppBar: AppBar (// TODO: Προσθήκη κουμπιών και τίτλου (102)), 

Η προσθήκη τουAppbar Στο πεδίο Appbar: Το ικρίωμα μας επιτρέπει να αποκτήσουμε μια τέλεια και δωρεάν διάταξη, αφήνοντας τη γραμμή εφαρμογής στην κορυφή της σελίδας και κάτω από το σώμα.

Ικρίωμα είναι ένα σημαντικό γραφικό στοιχείο στο MaterialApps. Παρέχει πρακτικά APIs για την εμφάνιση όλων των ειδών σημερινών στοιχείων, όπως τα πάνελ, τα μπαρ ειδοποίησης “σνακμπάρ” και τα στοιχεία του κάτω φύλλου. Διευκολύνει ακόμη και την τοποθέτηση ενός πλωτού κουμπιού δράσης.

Συμβουλευτείτε την τεκμηρίωση Flutter για να μάθετε περισσότερα για το ικρίωμα.

Καταγράψτε το έργο. Μόλις ενημερωθεί το ιερό, κάντε κλικ στο κουμπί Επόμενο (Μετά) για την εμφάνιση της αρχικής οθόνης.

Το στοιχείο είναι καλά τοποθετημένο, αλλά δεν διαθέτει τίτλο.

Προσθέστε ένα widget κειμένου

Στο σπίτι.Dart, προσθέστε έναν τίτλο στη γραμμή εφαρμογών AppBar:

// TODO: Προσθήκη γραμμής εφαρμογών (102) AppBar: AppBar (// ToDo: Προσθήκη κουμπιών και τίτλου (102) Τίτλος: Const Text ('Shrine'), // ToDo: Προσθήκη κουμπιών τερματισμού (102) 

Καταγράψτε το έργο.

Μπορεί να έχετε παρατηρήσει παραλλαγές για κάθε πλατφόρμα. Το σύστημα σχεδιασμού υλικών λαμβάνει υπόψη ότι κάθε πλατφόρμα (Android, iOS, Web) είναι διαφορετικό και ότι οι προσδοκίες των χρηστών είναι διαφορετικές. Για παράδειγμα, στο iOS, οι τίτλοι είναι σχεδόν πάντα επικεντρωμένοι. Αυτή είναι η προεπιλεγμένη συμπεριφορά που παρέχεται από το UIKIT. Στο Android, παρατάσσονται στα αριστερά. Επομένως, εάν χρησιμοποιείτε έναν εξομοιωτή ή μια συσκευή Android, ο τίτλος σας πρέπει να ευθυγραμμιστεί στα αριστερά. Σε περίπτωση προσομοιωτή ή συσκευή iOS, πρέπει να επικεντρωθεί.

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

Πολλές ράβδοι εφαρμογής έχουν ένα κουμπί δίπλα στον τίτλο. Προσθέστε ένα εικονίδιο μενού στην εφαρμογή μας.

Προσθέστε ένα κουμπί IconButton στην αρχή της γραμμής

Πάντα στο σπίτι.Dart, ορίστε ένα στοιχείο IconButton για τον κορυφαίο πεδίο: της γραμμής εφαρμογής AppBar. (Τοποθετήστε το πριν από το πεδίο τίτλου: Σύμφωνα με την αρχή από την αρχή μέχρι το τέλος της γραμμής):

 // TODO: Προσθήκη κουμπιών και τίτλου (102) οδηγώντας: iconButton (εικονίδιο: εικονίδιο const (εικονίδια (εικονίδια.Μενού, SemanticLabel: 'Menu',), Onpressed: () < print('Menu button'); >, Ουσία, 

Καταγράψτε το έργο.

Το εικονίδιο μενού (που ονομάζεται επίσης “Hamburger”), εμφανίζεται στην επιθυμητή τοποθεσία.

Η τάξη Εικονίδιο είναι ένας πρακτικός τρόπος για την ενσωμάτωση των υλικών εικονιδίων στην αίτησή σας. Χρησιμοποιεί ένα widget Εικόνισμα. Το Flutter έχει μια πλήρη συλλογή εικονιδίων στην τάξη Εικονίδια. Τα εικονίδια εισάγονται αυτόματα σύμφωνα με τις χαρτογραφήσεις καναλιών “const”.

Για να μάθετε περισσότερα σχετικά με την κλάση των εικονιδίων, δείτε την τεκμηρίωση Flutter. Για να μάθετε περισσότερα σχετικά με το widget εικονιδίων, δείτε την τεκμηρίωση Flutter.

Μπορείτε επίσης να προσθέσετε κουμπιά στο τέλος της γραμμής. Στο Flutter, αυτά τα κουμπιά ονομάζονται “ενέργειες”.

Οροι αρχή Και ΤΕΛΟΣ εκφράστε την έννοια της ανάγνωσης, ανεξάρτητα από την ενδιαφερόμενη γλώσσα. Όταν εργάζεστε σε μια γλώσσα που διαβάζει από αριστερά προς τα δεξιά, όπως τα αγγλικά, αρχή που σημαίνει αριστερά Και ΤΕΛΟΣ που σημαίνει δεξιά. Σε μια γλώσσα που διαβάζει από δεξιά προς τα αριστερά, όπως το αραβικό, ο όρος αρχή που σημαίνει δεξιά, Και ΤΕΛΟΣ που σημαίνει αριστερά.

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

Προσθέστε ενέργειες

Υπάρχει αρκετός χώρος για δύο άλλα στοιχεία IconButton.

Προσθέστε τα στην παρουσία Appbar μετά τον τίτλο:

// TODO: Προσθήκη κουμπιών τερματισμού (102) Ενέργειες: [IconButton (εικονίδιο: εικονίδιο Const (εικονίδια (εικονίδια.Αναζήτηση, SemanticLabel: 'Search',), Ontpresd: () < print('Search button'); >, ), IconButton (εικονίδιο: εικονίδιο Const (εικονίδια (εικονίδια.Tune, SemanticLabel: 'Filter',), onpresd: () < print('Filter button'); >, ),], 

Καταγράψτε το έργο. Η αρχική σας οθόνη θα πρέπει να προκύψει ως εξής:

Η εφαρμογή έχει τώρα ένα κουμπί στην αρχή της γραμμής, έναν τίτλο και δύο ενέργειες στα δεξιά. Η γραμμή εφαρμογής έχει επίσης αποτέλεσμαανύψωση Λόγω μιας μικρής απόχρωσης που δείχνει ότι είναι σε διαφορετικό επίπεδο από αυτό του περιεχομένου.

Σε μια τάξη εικονιδίων, το πεδίο Σημασιολογική διάλυση είναι ένας κοινός τρόπος για να προσθέσετε πληροφορίες προσβασιμότητας στο Flutter. Πρόκειται για ένα σύστημα πολύ κοντά στη λειτουργικότητα της διατύπωσης περιεχομένου Android και της Uiaccistibility στο iOS AccessibilityLabelbel . Θα το βρείτε σε πολλά μαθήματα.

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

Εάν ένα widget δεν διαθέτει πεδίο σημασιολογικού τομέα:, μπορείτε να το ενσωματώσετε σε ένα widget Σημασιολογία. Για να μάθετε περισσότερα σχετικά με το widget σημασιολογίας, δείτε την τεκμηρίωση Flutter.

5. Προσθέστε ένα φύλλο σε ένα πλέγμα

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

Ο καρτέλλες είναι ανεξάρτητα στοιχεία που εμφανίζουν το περιεχόμενο και τις ενέργειες που σχετίζονται με ένα συγκεκριμένο θέμα. Προσφέρουν έναν ευέλικτο τρόπο για να παρουσιάσουν παρόμοιο περιεχόμενο με τη μορφή συλλογής.

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

Για να μάθετε περισσότερα σχετικά με το widget της κάρτας (φύλλο), συμβουλευτείτε το άρθρο σχετικά με τη δημιουργία διατάξεων στο Flutter.

Προσθέστε ένα widget gridview

Ας ξεκινήσουμε προσθέτοντας ένα φύλλο κάτω από τη γραμμή επάνω εφαρμογής. Επί του παρόντος, το widget Κάρτα (Φύλλο) δεν περιέχει αρκετές πληροφορίες για να τοποθετήσετε τον εαυτό σας ορατά. Επομένως, θα το ενσωματώσουμε σε ένα widget Πλέγμα.

Αντικαταστήστε το κέντρο στο σώμα του στοιχείου ικριώματος με ένα widget GridView:

// TODO: Προσθέστε μια προβολή πλέγματος (102) Σώμα: GridView.Count (Crossaxiscount: 2, Padding: Const Edginsts.Όλα (16.0), Childaspectratio: 8.0/9.0, // TODO: Δημιουργήστε ένα πλέγμα καρτών (102) Παιδιά: [CARD ()],),), 

Ας αναλύσουμε αυτόν τον κωδικό. Το widget griver καλεί τον αριθμό του κατασκευαστή (), επειδή ο αριθμός των στοιχείων που εμφανίζει μπορεί να μετρηθεί και δεν είναι άπειρος. Αλλά χρειάζεται πρόσθετες πληροφορίες για να καθορίσει τη διάταξή του.

Η μεταβλητή Crossaxiscount: υποδεικνύει τον αριθμό των στοιχείων ανά γραμμή. Θέλουμε να πάρουμε δύο στήλες.

ΜΕΓΑΛΟ’εγκάρσιος άξονας Στο Flutter αντιστοιχεί στον άξονα που δεν μετακινούμε. Η αίσθηση της κύλισης καλείται Βασικός άξονας. Εάν χρησιμοποιείτε κατακόρυφη κύλιση, όπως και η προεπιλεγμένη περίπτωση με το GridView, ο εγκάρσιος άξονας είναι οριζόντιος.

Για να μάθετε περισσότερα, δείτε τη σελίδα αφιερωμένη στη δημιουργία διατάξεων.

Το πεδίο Padding: Ορίζει έναν ελεύθερο χώρο στις τέσσερις πλευρές του widget GridView. Φυσικά, αυτό το περιθώριο δεν είναι ορατό ως αποτέλεσμα του στοιχείου ή κάτω από αυτό, επειδή δεν έχει ακόμη τοποθετηθεί δίπλα σε αυτό το στοιχείο δεν έχει τοποθετηθεί δίπλα σε αυτό το στοιχείο.

Το πεδίο Childaspecto: Προσδιορίζει το μέγεθος των στοιχείων με τη μορφή αναλογιών (πλάτος στο ύψος).

Από προεπιλογή, το GridView δημιουργεί μπλοκ πανομοιότυπου μεγέθους.

Έχουμε ένα φύλλο, αλλά είναι άδειο. Προσθέστε widgets των παιδιών σε αυτό το φύλλο.

Βάλτε το περιεχόμενο

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

Ενημερώστε τα παιδιά από το widget GridView:

// todo: Δημιουργήστε ένα πλέγμα καρτών (102) Παιδιά: [CARD (clipbehavior: clip.Antialias, Child: Column (CrossaxisAlignment: CrossaxisAlignment.Ξεκινήστε, Παιδιά: [Aspectratio (Aspectratio: 18.0/11.0, παιδί: εικόνα.Περιουσιακό στοιχείο ('περιουσιακά στοιχεία/διαμάντι.png '),), padding (padding: const EdgeInsts.Fromltrb (16.0, 12.0, 16.0, 8.0), Παιδί: Στήλη (CrossaxisAlignment: CrossaxisAlignment.Ξεκινήστε, Παιδιά: [Κείμενο («Τίτλος»), Const Sizedbox (ύψος: 8.0), κείμενο ('δευτερογενές κείμενο'),],),],)]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]], 

Αυτός ο κωδικός προσθέτει ένα widget στήλης (στήλη) που σας επιτρέπει να έχετε widget των παιδιών κάθετα κάθετα.

Η παράμετρος CrossaxisAlignment: Το πεδίο καθορίζει την τιμή CrossaxisAlignment.Ξεκινήστε, πράγμα που σημαίνει “ευθυγραμμίστε το κείμενο στην” αρχή της γραμμής “” πλευρά “.

Το widget Αναλογία απεικόνισης Ορίζει τις αναλογίες της εμφανιζόμενης εικόνας, ανεξάρτητα από τον τύπο της εικόνας που παρέχεται.

Το στοιχείο Υλικό παραγεμίσματος Ορίζει ένα περιθώριο για το κείμενο.

Τα δύο widgets Κείμενο Το ένα πάνω από το άλλο τοποθετείται και διαχωρίζεται από οκτώ κενά σημεία χώρου (ΣιγουριάΟυσία. Δημιουργούμε ένα άλλο στοιχείο Στήλη Για να τους δώσετε εσωτερικά περιθώρια.

Καταγράψτε το έργο.

Σε αυτή την επισκόπηση, μπορείτε να δείτε ότι το φύλλο είναι τοποθετημένο με περιθώριο, οι γωνίες του είναι στρογγυλεμένες και προβάλλει μια σκιά (που αντιπροσωπεύει την ανύψωση του). Ολόκληρη η φόρμα ονομάζεται “δοχείο” στο σύστημα σχεδιασμού υλικών (δεν πρέπει να συγχέεται με την κλάση widget που ονομάζεται Container).

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

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

Τα φύλλα εμφανίζονται γενικά σε μια συλλογή με άλλα φύλλα. Τοποθετήστε τα με τη μορφή συλλογής σε ένα πλέγμα.

6. Δημιουργήστε μια συλλογή αρχείων

Όταν υπάρχουν πολλά φύλλα σε μια οθόνη, ομαδοποιούνται σε μία ή περισσότερες συλλογές. Τα αρχεία μιας συλλογής είναι coplanar: έχουν όλα τα ίδια ανύψωση σε κατάσταση ηρεμίας (δηλαδή όταν δεν έχουν επιλεγεί ή μετακινηθεί, κάτι που δεν θα κάνουμε εδώ).

Δημιουργήστε μια συλλογή αρχείων

Προς το παρόν, το φύλλο μας είναι τοποθετημένο μέσα στον τομέα των παιδιών: GridView Grid. Αυτό οδηγεί σε μια μεγάλη ποσότητα ένθετου κώδικα που μπορεί να είναι δύσκολο να διαβαστεί. Ας μετατρέψουμε αυτό το τμήμα του κώδικα σε μια συνάρτηση που επιτρέπει τη δημιουργία τόσων κενών φύλλων όπως είναι απαραίτητο και να επιστρέψει μια λίστα αρχείων.

Δημιουργήστε μια ιδιωτική λειτουργία πάνω από τη συνάρτηση build () (θυμηθείτε ότι οι λειτουργίες που ξεκινούν με μια υπογραμμιστική γραμμή είναι ιδιωτικά API):

// ToDo: Κάντε μια συλλογή καρτών (102) LIST _BUILDGRIDCARDS (InN CENT) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset('assets/diamond.png'), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ); >, ) Επιστροφή κάρτες? > 

Εκχωρήστε τα αρχεία που δημιουργήθηκαν στο πεδίο των παιδιών του widget GridView. μην ξεχάσεις να Αντικαταστήστε όλα τα στοιχεία που περιέχονται στο widget GridView με αυτόν τον νέο κωδικό ::

// TODO: Προσθέστε μια προβολή πλέγματος (102) Σώμα: GridView.Count (Crossaxiscount: 2, Padding: Const Edginsts.Όλα (16.0), Childaspectratio: 8.0/9.0, Παιδιά: _buildgridcards (10) // Αντικατάσταση), 

Καταγράψτε το έργο.

Οι κάρτες είναι παρόντες, αλλά δεν εμφανίζουν τίποτα προς το παρόν. Ήρθε η ώρα να προσθέσετε δεδομένα προϊόντων.

Προσθήκη δεδομένων προϊόντος

Η εφαρμογή περιέχει ορισμένα προϊόντα με εικόνες, ονόματα και τιμές. Προσθέστε αυτό στα widgets που υπάρχουν ήδη στο αρχείο

Στη συνέχεια στο σπίτι.Dart, εισαγάγετε ένα νέο πακέτο και μερικά αρχεία που παρέχονται για ένα μοντέλο δεδομένων:

Πακέτο εισαγωγής: Flutter/υλικό.Βέλος '; Πακέτο εισαγωγής: intl/intl.Βέλος '; Εισαγωγή μοντέλου/προϊόντος.Βέλος '; Εισαγωγή 'Μοντέλο/Προϊόντα_Repository.Βέλος '; 

Τέλος, τροποποιήστε το _BUILDGRIDCARDS () για να ανακτήσετε τις πληροφορίες του προϊόντος και να χρησιμοποιήσετε αυτά τα δεδομένα στα αρχεία:

// todo: Δημιουργήστε μια συλλογή καρτών (102) // Αντικαταστήστε ολόκληρη αυτή τη λίστα μεθόδων _BUILDGRIDCARDS (BuildContext Context) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Τελικό θέμα θεματάτα = θέμα.του (πλαισίου); Final Formatter NumberFormat = NumberFormat.SimpleCurrent (τοπικό: χώρους.Localof (πλαίσιο).toString ()); Επιστροφή προϊόντων.Χάρτης ((προϊόν) < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >Ουσία.Tolist (); > 

Παρατηρημένος : Περιμένετε πριν ξεκινήσετε τη συλλογή και την εκτέλεση. Παραμένει μια τροποποίηση που πρέπει να γίνει.

Για να διαμορφώσουμε το κείμενο, χρησιμοποιούμε δεδομένα θεμάτων Θεματάτα από την αξία Οικοδόμηση ρεύμα.

Για να μάθετε περισσότερα σχετικά με τη μορφοποίηση του κειμένου, συμβουλευτείτε το άρθρο σχετικά με την τυπογραφία στις οδηγίες σχεδιασμού υλικού. Για να μάθετε περισσότερα σχετικά με τη μορφοποίηση από ένα θέμα, συνεχίστε μετά από αυτό το εργαστήριο προγραμματισμού με MDC-103: Χρήση θεμάτων σχεδιασμού υλικού (χρώμα, σχήματα, ανύψωση και τύπος).

Τροποποιήστε επίσης τη λειτουργία build () για τη μετάδοση της τιμής Οικοδόμηση στο _BUILDGRIDCARDS () πριν ξεκινήσετε τη συλλογή:

// TODO: Προσθέστε μια προβολή πλέγματος (102) Σώμα: GridView.Count (Crossaxiscount: 2, Padding: Const Edginsts.Όλα (16.0), Childaspectratio: 8.0/9.0, Παιδιά: _buildgridcards (πλαίσιο) // Αλλαγή κώδικα), 

Επανεκκινήστε την καυτή εφαρμογή.

Μπορεί να παρατηρήσετε ότι δεν προσθέτουμε κάθετο χώρο μεταξύ των αρχείων. Επειδή έχουν τέσσερα περιθώρια από την κορυφή και το κάτω μέρος έχουν.

Καταγράψτε το έργο.

Εμφανίζονται τα παραγόμενα δεδομένα, αλλά οι εικόνες περιβάλλονται από έναν περιττό χώρο. Από προεπιλογή, οι εικόνες σχεδιάζονται με το πεδίο Πλατφόρμα ορίζεται .Scaledown (σε αυτή την περίπτωση). Αντικαταστήστε αυτήν την τιμή με .Fitwidth έτσι ώστε να μπορεί να μεγεθύνει και να αφαιρέσει τον περιττό χώρο.

Προσθέστε ένα Fit Field: Όπως η τιμή boxfit.Fitwidth:

 // todo: Προσαρμόστε το μέγεθος του πλαισίου (102) FIT: Boxfit.τετριμμένος, 

Τα προϊόντα μας εμφανίζονται τώρα τέλεια στην εφαρμογή.

7. Συγχαρητήρια !

Η εφαρμογή μας προσφέρει βασική λειτουργία επιτρέποντας στο χρήστη να μεταβεί από την οθόνη σύνδεσης σε αρχική οθόνη όπου εμφανίζονται τα προϊόντα. Μερικές γραμμές κώδικα ήταν αρκετές για να προσθέσουν μια υψηλότερη γραμμή εφαρμογής (με τίτλο και τρία κουμπιά) και αρχεία (για να παρουσιάσουν το περιεχόμενο της εφαρμογής μας). Η αρχική οθόνη που λαμβάνεται είναι απλή και λειτουργική και έχει βασική δομή και χρησιμοποιήσιμο περιεχόμενο.

Η ολοκληρωμένη έκδοση της εφαρμογής MDC-102 είναι διαθέσιμη στον κλάδο 103-Starter_and_102-Complete .

Μπορείτε να συγκρίνετε την έκδοσή σας στη σελίδα με την εφαρμογή αυτού του κλάδου.

Ακόλουθα βήματα

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

Ακόμη και αν η εφαρμογή μας λειτουργεί τέλεια, δεν αντικατοπτρίζει μια ταυτότητα μάρκας ή μια συγκεκριμένη άποψη. Στο εργαστήριο MDC-103: Χρήση θεμάτων σχεδιασμού υλικού (χρώμα, σχήματα, ανύψωση και τύπος), θα προσαρμόσουμε το στυλ αυτών των εξαρτημάτων για να εκφράσουμε μια σύγχρονη και δυναμική μάρκα.

Η πραγματοποίηση αυτού του εργαστηρίου προγραμματισμού με ζήτησε για μια στιγμή και λογικές προσπάθειες

Συμφωνώ απόλυτα

Ούτε συμφωνώ ούτε συμφωνώ

δεν συμφωνώ καθόλου

Θέλω να συνεχίσω να χρησιμοποιώ στοιχεία υλικού

Συμφωνώ απόλυτα

Ούτε συμφωνώ ούτε συμφωνώ

δεν συμφωνώ καθόλου

Εκτός εάν αναφέρεται διαφορετικά, το περιεχόμενο αυτής της σελίδας διέπεται από άδεια χρήσης Creative Commons Assignment 4.0 και τα δείγματα κώδικα διέπονται από άδεια Apache 2.0. Για περισσότερες πληροφορίες, ανατρέξτε στους κανόνες του ιστότοπου Google Developers. Η Java είναι σήμα κατατεθέν της Oracle ή/και των συνδεδεμένων εταιρειών της.