MDC-102: Structura și aspectul materialului

Proiectarea materialelor oferă formate de navigație care garantează o mare ușurință de utilizare. Una dintre cele mai vizibile componente este bara de aplicare superioară.

Creați un cont Google Play Developer

Informați -vă informațiile personale, adresa alegerii și parolei dvs.

Acceptați condițiile generale de vânzare (GTC).

Adăugați o fotografie frumoasă cu dvs.

Creați un cont Google Play Developer

Procedura pentru crearea unui cont Google Play Developer este mult mai simplă decât la Apple.

Conectați -vă cu adresa dvs. Gmail.

Acceptați GTC.

Reglați taxele de înregistrare: o singură plată de 25 de euro pentru a publica toate aplicațiile la alegere !

Informați informațiile referitoare la contul dvs.: Numele dezvoltatorului, adresa de e -mail și numărul de telefon.

Acest lucru a răspuns la întrebarea dvs ?

Vă mulțumim pentru comentarii, a existat o problemă pentru a trimite comentariile dvs. Vă rugăm să încercați din nou mai târziu.

Ultima actualizare din 9 noiembrie 2021

Articole asociate

• Creați o aplicație pe Google Play Console
• Generați certificatul Android P12
• Exportați fișierul APK sau AAB
• Publicați o aplicație Android
• Publicați o aplicație Android în afara Play Store
• Publicați pe Google Play Store

MDC-102: Structura și aspectul materialului

Componente de material (MDC) îi ajută pe dezvoltatori să implementeze proiectarea materialelor. Proiectat de o echipă de ingineri și specialiști în experiența utilizatorilor la Google, MDC oferă zeci de componente elegante și funcționale ale interfeței utilizatorului. Este disponibil pentru Android, iOS, Web și Flutter.material.IO/Dezvoltare.

În atelierul de programare MDC-101, ați folosit două elemente de componente ale materialului pentru a crea o pagină de conexiune: câmpuri de text și butoane care cuprinde animații „cerneală”. Pe aceste baze, să ne îmbogățească aplicația adăugând navigație, structură și date.

Obiectivele atelierului

În acest atelier de programare, veți crea un ecran de pornire pentru Altar, O cerere de comerț electronic pentru vânzarea de îmbrăcăminte și articole pentru casă. Acest ecran va conține:

• O bară de aplicații mai mare
• O listă de produse sub forma unei grile

Vă rugăm să rețineți că acest atelier de programare a fost înlocuit cu materialul 3, cu excepția capturilor de ecran. Cu toate acestea, transmit aceleași informații.

Acest atelier de programare este al doilea dintre cele patru ateliere care vă vor ajuta să creați o aplicație pentru un produs numit Sanctuary. Vă recomandăm să urmați toate atelierele de programare pentru a avansa în sarcini puțin câte puțin. Veți găsi aici atelierele de programare aici:

• Flutter MDC-101: Principiile de bază ale componentelor materiale
• MDC-103 Flutter: Utilizarea temelor de design material (culoare, forme, altitudine și tip)
• MDC-104 Flutter: Componente avansate de proiectare a materialelor

Material Flutter Componente și subsisteme din acest atelier de programare

• Superior
• Grile
• Carduri

În acest atelier de programare, veți utiliza componentele implicite furnizate de Material Flutter. Veți învăța să le personalizați în secțiunea MDC-103: utilizarea temelor de design material (culoare, forme, altitudine și tip).

Cum v -ați evalua nivelul de experiență în dezvoltare cu Flutter ?

2. Configurați mediul de dezvoltare a flutterului

Pentru acest atelier, aveți nevoie de două software: Flutter SDK și un editor.

Puteți rula atelierul de programare pe unul dintre următoarele dispozitive:

• Un dispozitiv Android sau fizic iOS conectat la computer și setat în modul dezvoltator.
• Simulatorul iOS (instrumente de cod X pentru instalare).
• Emulatorul Android (care trebuie configurat în Android Studio).
• Un browser (Chrome este necesar pentru depanare).
• Ca Windows, Linux sau MacOS Desktop. Trebuie să vă dezvoltați aplicația pe platforma unde intenționați să o implementați. De exemplu, dacă doriți să dezvoltați o aplicație pentru desktop Windows, trebuie să o faceți pe Windows pentru a accesa lanțul de compilare corespunzător. Aflați, de asemenea, despre cerințele specifice pentru sistemele de operare, care sunt detaliate pe documente.Flutter.Dev/desktop.

3. Descărcați aplicația de plecare pentru atelierul de programare

Ați urmat deja atelierul MDC-101 ?

Dacă ați terminat atelierul de programare MDC-101, codul dvs. ar trebui să fie gata să înceapă acest atelier. Mergeți la următoarea etapă: Adăugați o bară de aplicații mai mare.

Începi de la zero ?

Descărcați aplicația de plecare a atelierului de pornire

Aplicația de pornire se află în materiale-component-fluter-codelabs-102-starter_and_101-completă/mdc_100_series .

… sau clonă atelierul de la Github

Pentru a clona acest atelier de programare de la GitHub, rulați următoarele comenzi:

Git Clone https: // github.Com/materiale componente/componente de materiale-flutter-codelaburi.CD-CD CD-componente-componente-flutter-codelabs/mdc_100_series git checkout 102-starter_and_101-completă

Pentru ajutor, consultați secțiunea de clonare de la Github

Alegeți sucursala corectă

Atelierele de programare MDC-101 la 104 se bazează unul pe celălalt. Așadar, când terminați codul pentru atelierul MDC-102, acesta devine codul de pornire al atelierului MDC-103. Codul este împărțit în mai multe ramuri, pe care le puteți afișa lista folosind această comandă:

Ramură Git – -lista

Pentru a afișa codul finalizat, accesați sucursala 103-starter_and_102-completă .

Deschideți proiectul și executați aplicația

1. Deschideți proiectul în editorul la alegere.
2. Urmați instrucțiunile referitoare la editorul pe care l -ați ales. Acestea sunt accesibile la paragraful „Rulați aplicația” (executați aplicația) în pagina de pornire> Test drive (primii pași> test).

Operație de succes. Pagina de conectare la sanctuar din atelierul de programare MDC-101 trebuie să fie afișat pe dispozitivul dvs.

Acum că ecranul de conectare este în vigoare, să adăugăm câteva produse la aplicație.

4. Adăugați o bară de aplicații mai mare

Deocamdată, dacă faceți clic pe butonul „Următorul”, ecranul de pornire este afișat cu mesajul „Ați făcut -o!”(Ai reușit.)). Perfect. Cu toate acestea, utilizatorul nostru nu are nimic de făcut și nu știe unde se află în aplicație. Pentru a vă ajuta, este timpul să adăugați navigare.

Acolo navigare se referă la componente, interacțiuni, indicatori vizuali și arhitectură informațională care permit utilizatorilor să navigheze într -o aplicație. Vă permite să descoperiți conținut și caracteristici și să efectuați cu ușurință sarcini.

Pentru a afla mai multe, consultați articolul dedicat navigației în instrucțiunile de proiectare a materialelor.

Proiectarea materialelor oferă formate de navigație care garantează o mare ușurință de utilizare. Una dintre cele mai vizibile componente este bara de aplicare superioară.

Este posibil să cunoașteți acest element sub numele „bara de navigare” sub iOS sau pur și simplu „bara de aplicații” sau „antet”.

Pentru a oferi utilizatorilor acces rapid la alte acțiuni, să adăugăm o bară de aplicații superioară.

Adăugați un widget Appbar

In casa.Dart, adăugați o appbar la „schela”, apoi ștergeți const evidențiat:

Return const schela (// Todo: Adăugați bara de aplicații (102) AppBar: AppBar (// Todo: Adăugați butoane și titlu (102)), 

AdăugareaAppbar La câmpul Appbar: schela ne permite să obținem un aspect perfect și gratuit, lăsând bara de aplicații în partea de sus a paginii și sub corp.

Schela este un widget important în materialApps. Oferă API -uri practice pentru a afișa tot felul de componente de chestiuni actuale, cum ar fi panouri, bare de notificare „Snackbar” și elemente de foaie de jos. Chiar facilitează plasarea unui buton de acțiune plutitoare.

Consultați documentația Flutter pentru a afla mai multe despre schela.

Înregistrați proiectul. Odată ce altarul este actualizat, faceți clic pe Următorul (Urmând) pentru a afișa ecranul de pornire.

Elementul este bine poziționat, dar îi lipsește un titlu.

Adăugați un widget text

In casa.Dart, adăugați un titlu la bara de aplicații AppBar:

// TODO: Adăugați bara de aplicații (102) Appbar: Appbar (// Todo: Adăugați butoane și titlu (102) Titlu: const text ('Shrine'), // Todo: Adăugați butoane de finală (102) 

Înregistrați proiectul.

Este posibil să fi observat variații pentru fiecare platformă. Sistemul de proiectare a materialelor ține cont de faptul că fiecare platformă (Android, iOS, Web) este diferită și că așteptările utilizatorului sunt diferite. De exemplu, pe iOS, titlurile sunt aproape întotdeauna centrate. Acesta este comportamentul implicit furnizat de UIKIT. Pe Android, acestea sunt aliniate în stânga. Prin urmare, dacă utilizați un emulator sau un dispozitiv Android, titlul dvs. ar trebui să fie aliniat în stânga. În cazul unui simulator sau al unui dispozitiv iOS, acesta trebuie centrat.

Pentru a afla mai multe, consultați acest articol despre adaptarea la diferite platforme cu design de materiale.

Multe bare de aplicații au un buton lângă titlu. Adăugați o pictogramă de meniu la aplicația noastră.

Adăugați un buton IconButton la începutul liniei

Mereu acasă.Dart, Definiți un element IconButton pentru câmpul de frunte: al barei de aplicații Appbar. (Plasați -l înainte de câmpul de titlu: în conformitate cu începutul de la început până la sfârșitul liniei):

 // Todo: Adăugați butoane și titlu (102) Leading: IconButton (pictogramă: const pictogramă (pictograme.Meniu, SemanticLabel: „Meniu”,), onpressed: () < print('Menu button'); >, )), 

Înregistrați proiectul.

Pictograma meniului (numită și „Hamburger”), apare în locația dorită.

Clasa IconButton este o modalitate practică de a integra pictogramele materiale în aplicația dvs. Ea folosește un widget Pictogramă. Flutter are o colecție completă de icoane în clasă Icoane. Pictogramele sunt importate automat în funcție de mapările canalelor „const”.

Pentru a afla mai multe despre clasa de icoane, consultați documentația Flutter. Pentru a afla mai multe despre widget -ul pictogramei, consultați documentația Flutter.

Puteți adăuga, de asemenea, butoane la sfârșitul liniei. În flutter, aceste butoane se numesc „acțiuni”.

Termeni început Și Sfârşit exprimă sensul lecturii, indiferent de limba în cauză. Când lucrați într -o limbă care citește de la stânga la dreapta, cum ar fi engleza, început mijloace La stânga Și Sfârşit mijloace La dreapta. Într -o limbă care citește de la dreapta la stânga, ca araba, termenul început mijloace La dreapta, Și Sfârşit mijloace La stânga.

Pentru a afla mai multe despre inversarea interfeței de utilizator, consultați instrucțiunile de proiectare a materialelor privind bidirecționalitatea.

Adăugați acțiuni

Există suficient spațiu pentru alte două elemente IconButton.

Adăugați -le la instanța AppBar după titlu:

// TODO: Adăugați butoane de urmărire (102) acțiuni: [iconButton (pictogramă: const pictogramă (pictograme.Căutare, SemanticLabel: „Căutare”,), OntPresd: () < print('Search button'); >, ), IconButton (pictogramă: const pictogramă (pictograme.Tune, SemanticLabel: 'Filter',), onPresd: () < print('Filter button'); >, ),], 

Înregistrați proiectul. Ecranul dvs. de pornire ar trebui să apară după cum urmează:

Aplicația are acum un buton la începutul liniei, un titlu și două acțiuni din dreapta. Bara de aplicații are, de asemenea, un efect dealtitudine datorită unei ușoare nuanțe care indică faptul că se află la un nivel diferit de cel al conținutului.

Într -o clasă de icoane, câmpul Semanticlabel este o modalitate comună de a adăuga informații de accesibilitate la Flutter. Este un sistem foarte apropiat de formularea conținutului Android și a funcționalității Uiaccesibilitate pe IOS AccesibilitateLABELBELBEL . Îl veți găsi în multe cursuri.

Informațiile conținute în acest câmp fac posibilă furnizarea de informații pe cititorii de ecran cu privire la rolul acestui buton.

Dacă un widget nu are un câmp semanticlabel:, îl puteți încapsula într -un widget Semantică. Pentru a afla mai multe despre widgetul Semantics, consultați documentația Flutter.

5. Adăugați o foaie într -o grilă

Acum că aplicația noastră este puțin mai structurată, să ne organizăm conținutul plasându -le în fișiere.

carduri sunt elemente independente care afișează conținutul și acțiunile asociate cu un subiect dat. Acestea oferă o modalitate flexibilă de a prezenta conținut similar sub forma unei colecții.

Pentru a afla mai multe, consultați articolul dedicat fișierelor din instrucțiunile de proiectare a materialului.

Pentru a afla mai multe despre widget -ul cardului (foaie), consultați articolul despre crearea de machete în Flutter.

Adăugați un widget GridView

Să începem adăugând o foaie sub bara de aplicații superioare. În prezent, widgetul Card (Foaie) nu conține suficiente informații pentru a vă poziționa vizibil. Prin urmare, îl vom încapsula într -un widget GridView.

Înlocuiți centrul din corpul elementului schelei cu un widget GridView:

// Todo: Adăugați o vizualizare a grilei (102) Corp: GridView.Numără (CrossAxiscount: 2, Padding: Const Edgeinsts.Toate (16.0), Childaspectratio: 8.0/9.0, // TODO: Construiți o grilă de cărți (102) copii: [card ()],),), 

Să analizăm acest cod. Widgetul Griver apelează la numărul producătorului (), deoarece numărul de elemente pe care le afișează poate fi numărat și nu este infinit. Dar are nevoie de informații suplimentare pentru a -și defini aspectul.

Variabila CrossAxiscount: indică numărul de elemente pe linie. Vrem să obținem două coloane.

LAxa transversală în flutter corespunde axei pe care nu o derulăm. Sentimentul de defilare se numește Axa principală. Dacă utilizați defilare verticală, așa cum este cazul implicit cu GridView, axa transversală este orizontală.

Pentru a afla mai multe, consultați pagina dedicată creării machete.

Câmpul de căptușeală: definește un spațiu liber pe cele patru părți ale widgetului GridView. Desigur, această marjă nu este vizibilă ca urmare a elementului sau sub ea, deoarece nu a fost încă plasată niciun copil de gridview pentru acest element.

Câmpul Childasspecto: identifică dimensiunea elementelor sub formă de proporții (lățimea pe înălțime).

În mod implicit, GridView creează blocuri de dimensiuni identice.

Avem o foaie, dar este goală. Adăugați widget -urile pentru copii la această foaie.

Puneți conținutul

Fișele trebuie să includă zone pentru o imagine, un titlu și un text secundar.

Actualizați copiii din widgetul GridView:

// Todo: Construiți o grilă de cărți (102) Copii: [Card (Clipbehavior: Clip.Antialias, Copil: Coloană (CrossAxisalignment: CrossAxisalignment.Start, copii: [Aspectratio (Aspectratio: 18.0/11.0, copil: imagine.Activ ('active/diamant.png '),), căptușeală (căptușeală: const edgeinsts.de laltrb (16.0, 12.0, 16.0, 8.0), Copil: Coloană (CrossAxisalignment: CrossAxisalignment.Start, copii: [text („titlu”), const sized (înălțime: 8.0), text („text secundar”),],),),],),)]], 

Acest cod adaugă un widget de coloană (coloană) care vă permite să aveți widget -uri pentru copii pe verticală.

Parametrul CrossAxisalignment: Câmpul specifică valoarea CrossAxisalignment.Porniți, ceea ce înseamnă „aliniați textul pe„ începutul liniei ”„ lateral ”.

Widgetul Aspectratio Definește proporțiile imaginii afișate, indiferent de tipul de imagine furnizat.

Elementul Căptușeală definește o marjă pentru text.

Cele două widget -uri Text unul deasupra celuilalt este plasat și separat de opt puncte de spațiu goale (Dimensiune)). Creăm un alt element Coloană pentru a le oferi marje interioare.

Înregistrați proiectul.

În această imagine de ansamblu, puteți vedea că foaia este poziționată cu o marjă, colțurile sale sunt rotunjite și proiectează o umbră (reprezentând altitudinea sa). Întreaga formă se numește „container” în sistemul de proiectare a materialelor (nu trebuie confundat cu clasa de widget numită Container).

În afară de container, toate elementele foilor sunt opționale în material. Puteți adăuga text de antet, un autocolant sau un avatar, un text subtitrare, separatoare și chiar cosuri și pictograme.

Pentru a afla mai multe despre conținutul foilor, consultați acest articol în instrucțiunile de proiectare a materialelor.

Foile sunt afișate în general într -o colecție cu alte foi. Aranjați -le sub forma unei colecții într -o grilă.

6. Creați o colecție de fișiere

Când mai multe foi sunt prezente pe un ecran, acestea sunt grupate într -una sau mai multe colecții. Fișierele unei colecții sunt coplanare: au aceeași altitudine în repaus (adică atunci când nu sunt selectate sau mutate, pe care nu le vom face aici).

Creați o colecție de fișiere

Pentru moment, foaia noastră este poziționată în câmpul copiilor: GridView Grid. Acest lucru duce la o cantitate mare de cod cuibărit care poate fi dificil de citit. Să transformăm această parte a codului într -o funcție care permite generarea cât mai multor foi goale, cât este necesar și de a returna o listă de fișiere.

Creați o funcție privată deasupra funcției Build () (amintiți -vă că funcțiile care încep cu o linie de subliniere sunt API private):

// TODO: Faceți o colecție de cărți (102) Lista _BuildGridCards (int 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'), ], ), ), ], ), ); >, ); Cărți de întoarcere; > 

Alocați fișierele generate în câmpul copiilor din widgetul GridView. nu uita sa Înlocuiți toate elementele conținute în widgetul GridView cu acest nou cod ::

// Todo: Adăugați o vizualizare a grilei (102) Corp: GridView.Numără (CrossAxiscount: 2, Padding: Const Edgeinsts.Toate (16.0), Childaspectratio: 8.0/9.0, copii: _buildgridcards (10) // înlocuiți), 

Înregistrați proiectul.

Cardurile sunt prezente, dar nu afișează nimic pentru moment. A sosit momentul să adăugați date despre produs.

Adăugați date despre produs

Aplicația conține unele produse cu imagini, nume și prețuri. Adăugați acest lucru la widget -urile deja prezente în fișier

Apoi acasă.Dart, importă un pachet nou și unele fișiere furnizate pentru un model de date:

Import 'Pachet: Flutter/Material.Dart '; Import 'Pachet: Intl/Intl.Dart '; Importează modelul/produsul.Dart '; Import 'Model/Products_Repository.Dart '; 

În cele din urmă, modificați _buildgridcards () pentru a prelua informațiile despre produs și a utiliza aceste date în fișiere:

// TODO: Faceți o colecție de carduri (102) // Înlocuiți întreaga listă de metode _BuildGridCards (Context BuildContext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Tema finală tematică = tema.din (context); Formatter Final NumberFormat = NumberFormat.SimpleCurrent (local: spații.Localof (context).toString ()); Produse de întoarcere.Hartă ((produs) < 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, ), ], ), ), ), ], ), ); >)).A lista (); > 

Observat : Așteptați înainte de a lansa compilarea și execuția. Rămâne o modificare de făcut.

Pentru a formata textul, folosim date despre temă Themedata din valoare BuildContext actual.

Pentru a afla mai multe despre formatarea textului, consultați articolul despre tipografie în instrucțiunile de proiectare a materialelor. Pentru a afla mai multe despre formatarea dintr-o temă, continuați după acest atelier de programare cu MDC-103: utilizarea temelor de design material (culoare, forme, altitudine și tip).

De asemenea, modificați funcția Build () pentru a transmite valoarea BuildContext la _BuildGridCards () înainte de lansarea compilării:

// Todo: Adăugați o vizualizare a grilei (102) Corp: GridView.Numără (CrossAxiscount: 2, Padding: Const Edgeinsts.Toate (16.0), Childaspectratio: 8.0/9.0, copii: _BuildGridCards (context) // Cod de schimbare), 

Reporniți aplicația fierbinte.

Puteți observa că nu adăugăm spațiu vertical între fișiere. Pentru că au patru marje de sus și de jos au.

Înregistrați proiectul.

Datele produse sunt afișate, dar imaginile sunt înconjurate de un spațiu inutil. În mod implicit, imaginile sunt trase cu câmpul Boxfit definit .Scaledown (în acest caz). Înlocuiți această valoare cu .Fitwidth, astfel încât să poată mări și să îndepărteze spațiul inutil.

Adăugați un câmp potrivit: ca valoarea boxfit.Fitwidth:

 // Todo: Reglați dimensiunea cutiei (102) Fit: Boxfit.Fitwidth, 

Produsele noastre sunt acum perfect afișate în aplicație.

7. Felicitări !

Aplicația noastră oferă o operație de bază, permițând utilizatorului să meargă de pe ecranul de conectare la un ecran de pornire unde sunt afișate produsele. Câteva linii de cod au fost suficiente pentru a adăuga o bară de aplicații mai mare (cu un titlu și trei butoane) și fișiere (pentru a prezenta conținutul aplicației noastre). Ecranul de pornire obținut este simplu și funcțional și are o structură de bază și un conținut utilizabil.

Versiunea completată a aplicației MDC-102 este disponibilă în sucursala 103-starter_and_102 .

Puteți compara versiunea dvs. pe pagină cu aplicarea acestei sucursale.

Următoarele pași

Cu bara de aplicații, foaia, câmpul de text și butonul situat în partea de sus a paginii, am folosit acum patru componente principale ale Bibliotecii Flutter Material. Pentru a afla mai multe, consultați catalogul componentelor materiale.

Chiar dacă aplicația noastră funcționează perfect, nu reflectă o identitate de marcă sau un anumit punct de vedere. În atelierul MDC-103: Utilizarea temelor de design material (culoare, forme, altitudine și tip), vom personaliza stilul acestor componente pentru a exprima un brand modern și dinamic.

Realizarea acestui atelier de programare mi -a cerut un timp și eforturi rezonabile

In totalitate de acord

Nici nu sunt de acord, nici nu sunt de acord

nu este deloc de acord

Vreau să continui să folosesc componente de material

In totalitate de acord

Nici nu sunt de acord, nici nu sunt de acord

nu este deloc de acord

Cu excepția cazului în care este indicat altfel, conținutul acestei pagini este guvernat de o licență Creative Commons Alocare 4.0, iar eșantioanele de cod sunt guvernate de o licență Apache 2.0. Pentru mai multe informații, consultați Regulile site -ului Google Developers. Java este o marcă înregistrată a Oracle și/sau a companiilor sale afiliate.