<h1>MDC-102: materialestruktur og layout</h1>
<blockquote>Materialedesign tilbyder navigationsformater, der garanterer stor brugervenlighed. En af de mest synlige komponenter er den øverste applikationslinje.</blockquote>
<h2>Opret en Google Play -udviklerkonto</h2>
<p>Informer dine personlige oplysninger, den valgte adresse og din adgangskode.</p>
<p>Accepter de generelle salgsbetingelser (GTC).</p>
<p>Tilføj et dejligt billede af dig selv.</p>
<h2><strong>Opret en Google Play -udviklerkonto</strong></h2>
<p>Proceduren til oprettelse af en Google Play -udviklerkonto er meget enklere end hos Apple.</p>
<p>Opret forbindelse til din Gmail -adresse.</p>
<p>Accepter GTC.</p>
<p>Juster registreringsgebyrer: En enkelt betaling på 25 euro for at offentliggøre alle de valgte ansøgninger !</p>
<p>Informer oplysningerne om din konto: Udviklernavn, e -mail -adresse og telefonnummer.</p>
Dette har besvaret dit spørgsmål ?
<p>Tak for kommentarerne, der var et problem at indsende dine kommentarer. Prøv igen senere.</p>
Sidste opdatering den 9. november 2021
<h3>Tilknyttede artikler</h3>
<ul>
<li>Opret en applikation på Google Play Console</li>
<li>Generer Android P12 -certifikatet</li>
<li>Eksporter APK- eller AAB -filen</li>
<li>Udgiv en Android -applikation</li>
<li>Publicer en Android -app uden for Play Store</li>
<li>Publicer i Google Play Store</li>
</ul>
<h2>MDC-102: materialestruktur og layout</h2>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/8c0dd3b666dcdb8_36.png?hl=fr” alt=”logo_components_color_2x_web_96dp.png” width=”” /></p>
<p>Materielle komponenter (MDC) hjælper udviklere med at implementere materialedesign. MDC er designet af et team af ingeniører og brugeroplevelsesspecialister hos Google og tilbyder snesevis af elegante og funktionelle brugergrænsefladekomponenter. Det er tilgængeligt til Android, iOS, Internettet og fladder.materiale.Io/udvikle.</p>
<p>I MDC-101-programmeringsværkstedet brugte du to materialekomponenterelementer til at oprette en forbindelsesside: Tekstfelter og knapper, der omfatter “blæk” -animationer. Lad os berige vores anvendelse på disse baser ved at tilføje navigation, struktur og data.</p>
<h2><strong>Workshop -mål</strong></h2>
<p>I dette programmeringsværksted opretter du en startskærm til <strong>Helligdom</strong>, En e-handelsapplikation til salg af tøj og varer til huset. Denne skærm vil indeholde:</p>
<ul>
<li>En højere applikationslinje</li>
<li>En liste over produkter i form af et gitter</li>
</ul>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/219fcb9db8bad064_36.png?hl=fr” alt=”En e-handelsapplikation med en højere applikationslinje og et gitter fuld af produkter” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/dd79d882e2422adb_36.png?hl=fr” alt=”En e-handelsapplikation med en højere applikationslinje og et gitter fuld af produkter” width=”” /></p>
<p>Bemærk, at dette programmeringsværksted blev erstattet af materiale 3, med undtagelse af skærmbilleder. De formidler ikke desto mindre de samme oplysninger.</p>
<p>Denne programmeringsværksted er den anden af ​​de fire workshops, der hjælper dig med at oprette en applikation til et produkt kaldet Sanctuary. Vi anbefaler, at du følger alle programmeringsworkshops for at gå videre i opgaverne lidt efter lidt. Du finder dine programmeringsworkshops her:</p>
<ul>
<li>MDC-101 Flutter: Grundlæggende principper for materialekomponenterne</li>
<li>MDC-103 Flutter: Brug af temaer til materialedesign (farve, former, højde og type)</li>
<li>MDC-104 Flutter: Advanced Material Design Components</li>
</ul>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/91be5f7919ab5154_36.png?hl=fr” alt=”E-handelsapplikation baseret på et lyserødt og brunt tema med en højere applikationslinje og et asymmetrisk produktnet, der ruller vandret vandret” width=”” /></p>
<h2><strong>Materiale flagrende materialekomponenter og delsystemer i dette programmeringsværksted</strong></h2>
<ul>
<li>Øverst</li>
<li>Gitter</li>
<li>Kort</li>
</ul>
<p>I dette programmeringsværksted bruger du standardkomponenterne leveret af Material Flutter. Du lærer at tilpasse dem i MDC-103-sektionen: Brug af temaer til materialedesign (farve, former, højde og type).</p>
<h4>Hvordan ville du vurdere dit erfaringsniveau i udvikling med fladder ?</h4>
<h2>2. Konfigurer fladderudviklingsmiljøet</h2>
<p>Til denne workshop har du brug for to software: Flutter SDK og en udgiver.</p>
<p>Du kan køre programmeringsværkstedet på et af følgende enheder:</p>
<ul>
<li>En Android eller fysisk iOS -enhed, der er tilsluttet din computer og indstillet i udviklertilstand.</li>
<li>IOS -simulatoren (Xcode -værktøjer til installation).</li>
<li>Android -emulatoren (som skal konfigureres i Android Studio).</li>
<li>En browser (krom er påkrævet til fejlsøgning).</li>
<li>Som Windows, Linux eller MacOS Desktop. Du skal udvikle din applikation på platformen, hvor du planlægger at implementere den. For eksempel, hvis du vil udvikle en Windows -desktop -applikation, skal du gøre det på Windows for at få adgang. Lær også om de specifikke krav til operativsystemer, der er detaljerede på dokumenter.Flutter.Dev/desktop.</li>
</ul>
<h2>3. Download afgangsappen til programmeringsværkstedet</h2>
<h2><strong>Du har allerede fulgt MDC-101-værkstedet ?</strong></h2>
<p>Hvis du er færdig med MDC-101-programmeringsværkstedet, skal din kode være klar til at starte dette værksted. Gå til næste trin: <em>Tilføj en højere applikationslinje</em>.</p>
<h2>Du starter fra bunden ?</h2>
<h3>Download Apprent Workshop -afgangsapplikationen</h3>
<p>Startapplikationen er i materialekomponent-fladder-codelabs-102-starter_and_101-komplet/mdc_100_series .</p>
<h2><strong>… eller klone værkstedet fra Github</strong></h2>
<p>For at klone dette programmeringsværksted fra GitHub, kør følgende kommandoer:</p>
<pre>Git klon https: // github.Com/materiale-komponenter/materiale-komponenter-fladder-kodelaber.Git CD Material-Components-Flutter-Codelabs/MDC_100_Series Git Checkout 102-starter_and_101-komplet</pre>
<p>For hjælp, se kloningssektionen fra GitHub</p>
<h2><strong>Vælg den rigtige gren</strong></h2>
<p>MDC-101-programmeringsworkshops på 104 er afhængige af hinanden. Så når du er færdig med koden til MDC-102-værkstedet, bliver det startkoden for MDC-103-værkstedet. Koden er opdelt i flere grene, som du kan vise listen ved hjælp af denne kommando:</p>
<p>Git Branch – -List</p>
<p>For at få vist den færdige kode skal du gå til 103-starter_and_102-komplet filial .</p>
<h2>Åbn projektet, og udfør ansøgningen</h2>
<ol>
<li>Åbn projektet i udgiveren efter dit valg.</li>
<li>Følg instruktionerne vedrørende den udgiver, du har valgt. De er tilgængelige for afsnittet “Kør appen” (Udfør applikationen) på Start> Test Drive -siden (første trin> Test).</li>
</ol>
<p>Vellykket operation. Sanctuary-forbindelsessiden fra MDC-101-programmeringsværkstedet skal vises på din enhed.</p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/77c93e89ac594afe_36.png?hl=fr” alt=”Forbindelsesside, der omfatter felterne”Nom d’utilisateur” et “Mot de passe”, et les boutons “Annuler” et “Suivant”” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/679775b6deb65c3f_36.png?hl=fr” alt=”Forbindelsesside, der omfatter felterne”Nom d’utilisateur” et “Mot de passe”, et les boutons “Annuler” et “Suivant”” width=”” /></p>
<p>Nu hvor forbindelsesskærmen er på plads, lad os tilføje nogle produkter til applikationen.</p>
<h2>4. Tilføj en højere applikationslinje</h2>
<p>For øjeblikket, hvis du klikker på knappen “Næste”, vises startskærmen med meddelelsen “Du gjorde det!”(Det lykkedes dig.)). Perfekt. Vores bruger har dog intet at gøre og ved ikke, hvor han er i applikationen. For at hjælpe dig er det tid til at tilføje navigation.</p>
<p>Der <strong>navigation</strong> Henviser til komponenter, interaktioner, visuelle indikatorer og informationsarkitektur, der giver brugerne mulighed for at navigere i en applikation. Det giver dig mulighed for at opdage indhold og funktioner og let udføre opgaver.</p>
<p>For at finde ud af mere skal du konsultere den artikel, der er afsat til navigation i materialesigninstruktionerne.</p>
<p>Materialedesign tilbyder navigationsformater, der garanterer stor brugervenlighed. En af de mest synlige komponenter er den øverste applikationslinje.</p>
<p>Du kender måske dette element under navnet “Navigation Bar” under iOS, eller blot “Application Bar” eller “Header”.</p>
<p>For at tilbyde brugerne hurtig adgang til andre handlinger, lad os tilføje en højere applikationslinje.</p>
<h2><strong>Tilføj en appbar -widget</strong></h2>
<p>I hjemmet.Dart, tilføj en appbar til “stillads”, og slet derefter CONST fremhævet:</p>
<pre><code translate=”no” dir=”ltr”>Return const stillads (// todo: tilføj appbar (102) appbar: appbar (// todo: tilføj knapper og titel (102)),</code> </pre>
<p>Tilføjelsen af<strong>Appbar</strong> På AppBar -feltet: Stilladser giver os mulighed for at få et perfekt og gratis layout, hvilket forlader applikationslinjen øverst på siden og under kroppen.</p>
<p><strong>Stillads</strong> er en vigtig widget i MaterialApps. Det giver praktiske API’er til at vise alle slags aktuelle sagerskomponenter, såsom paneler, “Snackbar” -meddelelsesbjælker og nederste ark elementer. Det letter endda placeringen af ​​en flydende handlingsknap.</p>
<p>Kontakt fladdokumentationen for at finde ud af mere om stillads.</p>
<p>Registrer projektet. Når helligdommen er opdateret, skal du klikke på <strong>Næste</strong> (Følger) for at få vist startskærmen.</p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/fdda22f7ad3e128a_36.png?hl=fr” alt=”skærm, der angiver”Vous avez réussi !”” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/7aac9159c56aa110_36.png?hl=fr” alt=”skærm, der angiver”Vous avez réussi !”” width=”” /></p>
<p>Elementet er godt placeret, men det mangler en titel.</p>
<h2><strong>Tilføj en tekstwidget</strong></h2>
<p>I hjemmet.Dart, tilføj en titel til AppBar -applikationslinjen:</p>
<pre><code translate=”no” dir=”ltr”>// TODO: Tilføj App Bar (102) AppBar: AppBar (// TODO: Tilføj knapper og titel (102) Titel: Const Text (‘Shrine’), // TODO: Tilføj bageste knapper (102)</code> </pre>
<p>Registrer projektet.</p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/e45285cdb72b486d_36.png?hl=fr” alt=”En ansøgningsbar, hvis titel er Sanctuary” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/392491678976939f_36.png?hl=fr” alt=”En ansøgningsbar, hvis titel er Sanctuary” width=”” /></p>
<p>Du har måske bemærket variationer for hver platform. Det materielle designsystem tager højde for, at hver platform (Android, iOS, WEB) er forskellig, og at brugerforventningerne er forskellige. For eksempel på iOS er titlerne næsten altid centreret. Dette er standardadfærd, der leveres af UIKIT. På Android er de stilt op til venstre. Derfor, hvis du bruger en emulator eller en Android -enhed, skal din titel justeres til venstre. I tilfælde af en simulator eller en iOS -enhed skal den være centreret.</p>
<p>For at finde ud af mere skal du konsultere denne artikel om tilpasning til forskellige platforme med materialedesign.</p>
<p>Mange applikationsbjælker har en knap ved siden af ​​titlen. Føj et menuikon til vores applikation.</p>
<h2><strong>Tilføj en IconButton -knap i starten af ​​linjen</strong></h2>
<p>Altid hjemme.Dart, definer et IconButton -element til det førende felt: af AppBar -applikationslinjen. (Placer det inden titelfeltet: I overensstemmelse med starten fra start til slutningen af ​​linjen):</p>
<pre> <code translate=”no” dir=”ltr”>// TODO: Tilføj knapper og titel (102) Førende: IconButton (Icon: Const Icon (Icons.Menu, SemanticLabel: ‘Menu’,), ontpresset: () < print(‘Menu button’); >, )),</code> </pre>
<p>Registrer projektet.</p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/794577d0ea758040_36.png?hl=fr” alt=”En applikationslinje med en titel og et hamburger -menuikon” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/598cf2815d829b9b_36.png?hl=fr” alt=”En applikationslinje med en titel og et hamburger -menuikon” width=”” /></p>
<p>Menuikonet (også kaldet “hamburger”), vises på det ønskede sted.</p>
<p>Klassen <strong>IconButton</strong> er en praktisk måde at integrere materielle ikoner i din applikation. Hun bruger en widget <strong>Ikon</strong>. Flutter har en komplet samling af ikoner i klasseværelset <strong>Ikoner</strong>. Ikoner importeres automatisk i henhold til “const” kanalkortlægning.</p>
<p>For at finde ud af mere om ICONS -klassen, se Flutter -dokumentationen. For at finde ud af mere om ikonwidgeten, se fladdokumentationen.</p>
<p>Du kan også tilføje knapper i slutningen af ​​linjen. I fladder kaldes disse knapper “handlinger”.</p>
<p>Betingelser <strong>starten</strong> Og <strong>ENDE</strong> udtrykke betydningen af ​​læsning, uanset det pågældende sprog. Når du arbejder i en tunge, der læser fra venstre mod højre, såsom engelsk, <em>starten</em> midler <em>til venstre</em> Og <em>ENDE</em> midler <em>til højre</em>. På et sprog, der lyder fra højre til venstre, som arabisk, udtrykket <em>starten</em> midler <em>til højre</em>, Og <em>ENDE</em> midler <em>til venstre</em>.</p>
<p>For at finde ud af mere om reverseringen af ​​brugergrænsefladen, skal du kontakte materialesigninstruktionerne om tovejs.</p>
<h2><strong>Tilføj handlinger</strong></h2>
<p>Der er plads nok til to andre iconbutton -elementer.</p>
<p>Føj dem til appbar -forekomsten efter titlen:</p>
<pre><code translate=”no” dir=”ltr”>// TODO: Tilføj efterfølgende knapper (102) Handlinger: [IconButton (Icon: Const Icon (ikoner.Søg, SemanticLabel: ‘Søg’,), OntPresd: () < print(‘Search button’); >, ), IconButton (Icon: Const Icon (ikoner.Tune, SemanticLabel: ‘Filter’,), OnPresd: () < print(‘Filter button’); >, ),],</code> </pre>
<p>Registrer projektet. Din startskærm skal opstå som følger:</p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/d3a33ae1359e9801_36.png?hl=fr” alt=”En applikationslinje med helligdom som titel- og hamburgermenu og forsknings- og personaliseringsikoner i slutningen” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/a383f4dcd3267d2a_36.png?hl=fr” alt=”En applikationslinje med helligdom som titel- og hamburgermenu og forsknings- og personaliseringsikoner i slutningen” width=”” /></p>
<p>Applikationen har nu en knap i starten af ​​linjen, en titel og to handlinger til højre. Applikationslinjen har også en effekt af<strong>højde</strong> På grund af en lille skygge, der indikerer, at den er på et andet niveau end indholdet.</p>
<p>I en ikonklasse, feltet <strong>SemanticLabel</strong> er en almindelig måde at tilføje tilgængelighedsoplysninger til at flagre på. Det er et system meget tæt på Android -indholdsordning og uiaccessibility -funktionaliteten på iOS -tilgængelighedslabelbel . Du finder det i mange kurser.</p>
<p>Oplysningerne indeholdt på dette felt gør det muligt at give oplysninger om skærmlæsere om rollen som denne knap.</p>
<p>Hvis en widget ikke har et SemanticLabel -felt:, kan du indkapsle den i en widget <strong>Semantik</strong>. For at finde ud af mere om Semantics -widgeten, se Flutter -dokumentationen.</p>
<h2>5. Tilføj et ark i et gitter</h2>
<p>Nu hvor vores ansøgning er lidt mere struktureret, lad os organisere sit indhold ved at placere dem i filer.</p>
<p>DET <strong>kort</strong> er uafhængige elementer, der viser indhold og handlinger, der er forbundet med et givet emne. De tilbyder en fleksibel måde at præsentere lignende indhold i form af en samling.</p>
<p>For at finde ud af mere, se artiklen, der er afsat til filer i materialesigninstruktionerne.</p>
<p>For at finde ud af mere om kortwidgeten (ark) skal du kontakte artiklen om oprettelse af layouts i fladder.</p>
<h2><strong>Tilføj en Gridview -widget</strong></h2>
<p>Lad os starte med at tilføje et ark under den øverste applikationslinje. I øjeblikket widget <strong>Kort</strong> (Ark) indeholder ikke nok information til at placere dig synligt. Vi vil derfor indkapsle det i en widget <strong>Gridview</strong>.</p>
<p>Udskift midten i kroppen af ​​stilladselementet med en Gridview -widget:</p>
<pre><code translate=”no” dir=”ltr”>// TODO: Tilføj en gittervisning (102) krop: Gridview.Count (Crossaxiscount: 2, polstring: Const Edgeinsts.Alle (16.0), Childaspectratio: 8.0/9.0, // Todo: Byg et gitter af kort (102) børn: [kort ()],),),</code> </pre>
<p>Lad os analysere denne kode. Griver -widgeten kalder producenten tælling (), fordi antallet af elementer, den viser, kan tælles og ikke er uendelig. Men han har brug for yderligere oplysninger for at definere sit layout.</p>
<p>Crossaxiscount -variablen: Angiver antallet af elementer pr. Linje. Vi ønsker at få to kolonner.</p>
<p>L ‘<strong>tværgående akse</strong> I fladder svarer til den akse, som vi ikke ruller. Følelsen af ​​rulning kaldes <strong>Hovedakse</strong>. Hvis du bruger lodret rulning, ligesom standardtilfældet med GridView, er den tværgående akse vandret.</p>
<p>For at finde ud af mere, se siden dedikeret til at oprette layouts.</p>
<p>Polstringsfeltet: Definerer en fri plads på de fire sider af Gridview -widgeten. Naturligvis er denne margin ikke synlig som et resultat af elementet eller under det, fordi der endnu ikke er placeret noget børnepettel.</p>
<p>Childaspecto -feltet: Identificerer størrelsen på elementerne i form af proportioner (bredde på højde).</p>
<p>Som standard skaber Gridview blokke af identisk størrelse.</p>
<p>Vi har et ark, men det er tomt. Tilføj børns widgets til dette ark.</p>
<h2><strong>Sæt indholdet</strong></h2>
<p>Arkene skal indeholde områder til et billede, en titel og sekundær tekst.</p>
<p>Opdater børn fra Gridview -widgeten:</p>
<pre><code translate=”no” dir=”ltr”>// TODO: Byg et gitter af kort (102) børn: [kort (clipbehavior: klip.Antialias, barn: søjle (tværaxisignment: crossaxisalignment.Start, børn: [aspectratio (aspectratio: 18.0/11.0, barn: billede.Asset (‘Aktiver/Diamond.png ‘),), polstring (polstring: const edgeinsts.Fromltrb (16.0, 12.0, 16.0, 8.0), barn: søjle (tværsaxisignment: crossaxisalignment.Start, børn: [tekst (‘titel’), const -sizedbox (højde: 8.0), tekst (‘sekundær tekst’),],),),],),)]],</code> </pre>
<p>Denne kode tilføjer en kolonnewidget (kolonne), som giver dig mulighed for at få børns widgets lodret.</p>
<p>CrossAxisalignment -parameteren: Felt specificerer crossaxisalignment -værdien.Start, hvilket betyder “Juster teksten på ‘starten af ​​linjen'” side “.</p>
<p>Widgeten <strong>Aspectratio</strong> Definerer andelene af det viste billede, uanset hvilken type billede der er angivet.</p>
<p>Elementet <strong>Polstring</strong> Definerer en margin for teksten.</p>
<p>De to widgets <strong>Tekst</strong> Den ene over den anden er placeret og adskilt af otte tomme rumpunkter (<strong>Størrelsesboks</strong>)). Vi opretter et andet element <strong>Kolonne</strong> At give dem indvendige marginer.</p>
<p>Registrer projektet.</p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/4ffb1e8e3bd8de3_36.png?hl=fr” alt=”Et enkelt element med et billede, en titel og en sekundær tekst” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/3dd2be5afeb20072_36.png?hl=fr” alt=”Et enkelt element med et billede, en titel og en sekundær tekst” width=”” /></p>
<p>I denne oversigt kan du se, at arket er placeret med en margin, dets hjørner er afrundede, og det projicerer en skygge (repræsenterer dens højde). Hele formularen kaldes “container” i materialedesignsystemet (ikke at forveksle med widget -klassen kaldet container).</p>
<p>Bortset fra beholderen er alle elementerne i arkene valgfri i materiale. Du kan tilføje headertekst, et klistermærke eller en avatar, en underteksttekst, separatorer og endda bumser og ikoner.</p>
<p>For at finde ud af mere om indholdet af arkene skal du konsultere denne artikel i materialesigninstruktionerne.</p>
<p>Arkene vises generelt i en samling med andre ark. Arranger dem i form af en samling i et gitter.</p>
<h2>6. Opret en samling af filer</h2>
<p>Når flere ark er til stede på en skærm, er de grupperet i en eller flere samlinger. Filerne for en samling er coplanar: de har alle den samme højde i hvile (det vil sige, når de ikke er valgt eller flyttet, hvilket vi ikke vil gøre her).</p>
<h2><strong>Opret en samling af filer</strong></h2>
<p>For øjeblikket er vores ark placeret inde i børnefeltet: Gridview Grid. Dette fører til en stor mængde indlejret kode, der kan være vanskelig at læse. Lad os omdanne denne del af koden til en funktion, der giver mulighed for at generere så mange tomme ark som nødvendigt og returnere en liste over filer.</p>
<p>Opret en privat funktion over funktionen Build () (husk, at funktionerne, der starter med en understregende linje, er private API’er):</p>
<pre><code translate=”no” dir=”ltr”>// TODO: Lav en samling af kort (102) Liste _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’), ], ), ), ], ), ); >, ); Returkort; ></code> </pre>
<p>Tildel de filer, der er genereret på børnefeltet i Gridview -widgeten. Glem ikke at <strong>Udskift alle elementerne indeholdt i GridView -widgeten med denne nye kode</strong> ::</p>
<pre><code translate=”no” dir=”ltr”>// TODO: Tilføj en gittervisning (102) krop: Gridview.Count (Crossaxiscount: 2, polstring: Const Edgeinsts.Alle (16.0), Childaspectratio: 8.0/9.0, Børn: _BuildGridCards (10) // Udskift),</code> </pre>
<p>Registrer projektet.</p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/80f9295ef83cd7dd_36.png?hl=fr” alt=”Et gitter af elementer med et billede, en titel og en sekundær tekst” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/3fcdcd16de1258b0_36.png?hl=fr” alt=”Et gitter af elementer med et billede, en titel og en sekundær tekst” width=”” /></p>
<p>Kortene er til stede, men de viser ikke noget for øjeblikket. Tiden er inde til at tilføje produktdata.</p>
<h2><strong>Tilføj produktdata</strong></h2>
<p>Applikationen indeholder nogle produkter med billeder, navne og priser. Føj dette til de widgets, der allerede er til stede i filen</p>
<p>Så hjemme.Dart, importer en ny pakke og nogle filer til en datamodel:</p>
<pre><code translate=”no” dir=”ltr”>Import ‘pakke: fladder/materiale.Dart ‘; Import ‘pakke: Intl/Intl.Dart ‘; Import ‘model/produkt.Dart ‘; Import ‘model/produkter_repository.Dart ‘;</code> </pre>
<p>Endelig skal du ændre _buildGridCards () for at hente produktoplysninger og bruge disse data i filerne:</p>
<pre><code translate=”no” dir=”ltr”>// TODO: Lav en samling kort (102) // Udskift hele denne metodeliste _buildGridCards (BuildContext -kontekst) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Final Themedata tema = tema.af (kontekst); Endelig NumberFormat Formatter = NumberFormat.Simplecurrent (lokal: lokaler.Localof (kontekst).toString ()); Returprodukter.Kort ((produkt) < 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 (); ></code> </pre>
<p><strong>BEMÆRKET</strong> : Vent, før du lancerer samlingen og udførelsen. Der er stadig en ændring at foretage.</p>
<p>For at formatere teksten bruger vi tema data <strong>Themedata</strong> fra værdien <strong>BuildContext</strong> nuværende.</p>
<p>For at lære mere om formateringen af ​​teksten, skal du konsultere artiklen om typografi i materialesigninstruktionerne. For at finde ud af mere om formatering fra et tema, fortsæt efter dette programmeringsværksted med MDC-103: Brug af temaer med materialesign (farve, former, højde og type).</p>
<p>Ændre også funktionen build () for at transmittere værdien <strong>BuildContext</strong> på _buildGridCards () inden du starter kompileringen:</p>
<pre><code translate=”no” dir=”ltr”>// TODO: Tilføj en gittervisning (102) krop: Gridview.Count (Crossaxiscount: 2, polstring: Const Edgeinsts.Alle (16.0), Childaspectratio: 8.0/9.0, Børn: _BuildGridCards (kontekst) // Skift kode),</code> </pre>
<p>Genstart den varme applikation.</p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/5e00c256e1c3c9f4_36.png?hl=fr” alt=”Et gitter af elementer med et billede, en titel og en pris” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/5afa8b0e625e6b0c_36.png?hl=fr” alt=”Et gitter af elementer med et billede, en titel og en pris” width=”” /></p>
<p>Du kan bemærke, at vi ikke tilføjer lodret mellemrum mellem filerne. Fordi de har fire marginer i toppen og bunden har.</p>
<p>Registrer projektet.</p>
<p>De producerede data vises, men billederne er omgivet af et unødvendigt rum. Som standard tegnes billederne med marken <strong>Boxfit</strong> defineret .Skaleretown (i dette tilfælde). Udskift denne værdi med .FitWidth, så hun kan zoome ind og fjerne det unødvendige rum.</p>
<p>Tilføj et fit -felt: Ligesom Boxfit -værdien.FitWidth:</p>
<pre> <code translate=”no” dir=”ltr”>// TODO: Juster kassestørrelsen (102) Fit: Boxfit.FitWidth,</code> </pre>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/219fcb9db8bad064_36.png?hl=fr” alt=”Et gitter af artikler med et beskåret billede, titlen på produktet og prisen” width=”” /></p>
<p><img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/dd79d882e2422adb_36.png?hl=fr” alt=”Et gitter af artikler med et beskåret billede, titlen på produktet og prisen” width=”” /></p>
<p>Vores produkter vises nu perfekt i applikationen.</p>
<h2>7. Tillykke !</h2>
<p>Vores applikation tilbyder grundlæggende drift, der giver brugeren mulighed for at gå fra forbindelsesskærmen til en startskærm, hvor produkterne vises. Et par kodelinjer var nok til at tilføje en højere applikationslinje (med en titel og tre knapper) og filer (til at præsentere indholdet af vores applikation). Den opnåede startskærm er enkel og funktionel og har en grundlæggende struktur og brugbart indhold.</p>
<p>Den afsluttede version af MDC-102-applikationen er tilgængelig i 103-starter_and_102-komplet filial .</p>
<p>Du kan sammenligne din version på siden med anvendelsen af ​​denne gren.</p>
<h2><strong>Følger trin</strong></h2>
<p>Med applikationslinjen, arket, tekstfeltet og knappen placeret øverst på siden, har vi nu brugt fire hovedkomponenter i materialet fladderbibliotek. For at finde ud af mere, se kataloget over materialekomponenter.</p>
<p>Selv hvis vores applikation fungerer perfekt, afspejler den ikke en brandidentitet eller et bestemt synspunkt. I MDC-103-værkstedet: Brug af temaer for materialedesign (farve, former, højde og type), personaliserer vi stilen på disse komponenter til at udtrykke et moderne og dynamisk brand.</p>
<h4>Realiseringen af ​​dette programmeringsværksted spurgte mig i en tid og en rimelig indsats</h4>
<p>Helt enig</p>
<p>Hverken er enige eller enige</p>
<p>overhovedet ikke enig</p>
<h4>Jeg vil fortsætte med at bruge materialekomponenter</h4>
<p>Helt enig</p>
<p>Hverken er enige eller enige</p>
<p>overhovedet ikke enig</p>
<p>Medmindre andet er angivet, styres indholdet af denne side af en Creative Commons Assignment 4 -licens.0, og kodeprøver styres af en Apache 2 -licens.0. For mere information, se reglerne på Google Developers -webstedet. Java er et registreret varemærke til Oracle og/eller dets tilknyttede virksomheder.</p>