MDC-102: Materialstruktur och layout

Materialdesign erbjuder navigationsformat som garanterar mycket användarvänlighet. En av de mest synliga komponenterna är den övre applikationsfältet.

Skapa ett Google Play -utvecklarkonto

Informera din personliga information, adressen du väljer och ditt lösenord.

Acceptera de allmänna försäljningsvillkoren (GTC).

Lägg till ett trevligt foto av dig själv.

Skapa ett Google Play -utvecklarkonto

Förfarandet för att skapa ett Google Play -utvecklarkonto är mycket enklare än på Apple.

Anslut till din Gmail -adress.

Acceptera GTC.

Justera registreringsavgifter: En enda betalning på 25 euro för att publicera alla ansökningar du väljer !

Informera informationen om ditt konto: Utvecklarens namn, e -postadress och telefonnummer.

Detta har svarat på din fråga ?

Tack för kommentarerna att det fanns ett problem att lämna in dina kommentarer. Vänligen försök igen senare.

Senaste uppdateringen den 9 november 2021

Tillhörande artiklar

• Skapa en applikation på Google Play Console
• Generera Android P12 -certifikatet
• Exportera APK- eller AAB -filen
• Publicera en Android -applikation
• Publicera en Android -app utanför Play Store
• Publicera i Google Play Store

MDC-102: Materialstruktur och layout

Materialkomponenter (MDC) hjälper utvecklare att implementera materialdesign. MDC är designad av ett team av ingenjörer och användarupplevelsespecialister på Google och erbjuder dussintals eleganta och funktionella användargränssnittskomponenter. Det är tillgängligt för Android, iOS, webben och fladdran.material.IO/utveckla.

I MDC-101-programmeringsverkstaden använde du två materialkomponenter för att skapa en anslutningssida: textfält och knappar som omfattar “bläck” -animationer. Låt oss på dessa baser berika vår applikation genom att lägga till navigering, struktur och data.

Verkstadsmål

I den här programmeringsverkstaden skapar du en hemskärm för Helgedom, En e-handelsapplikation för försäljning av kläder och föremål för huset. Den här skärmen kommer att innehålla:

• En högre applikationsfält
• En lista över produkter i form av ett rutnät

Observera att denna programmeringsverkstad ersattes av Material 3, med undantag för skärmdumpar. De förmedlar ändå samma information.

Denna programmeringsverkstad är den andra av de fyra workshops som hjälper dig att skapa en applikation för en produkt som heter Sanctuary. Vi rekommenderar att du följer alla programmeringsworkshops för att gå vidare i uppgifterna lite efter lilla. Du hittar dina programmeringsverkstäder här:

• MDC-101 Flutter: Grundläggande principer för materialkomponenterna
• MDC-103 Flutter: Användning av teman för materialdesign (färg, former, höjd och typ)
• MDC-104 Flutter: Avancerade materialdesignkomponenter

Material Flutter Material -komponenter och delsystem i denna programmeringsverkstad

• Övre
• Rutnät
• Kort

I den här programmeringsverkstaden använder du standardkomponenterna som tillhandahålls av Material Flutter. Du kommer att lära dig att anpassa dem i avsnittet MDC-103: Användning av teman för materialdesign (färg, former, höjd och typ).

Hur skulle du bedöma din erfarenhet av erfarenhet med Flutter ?

2. Konfigurera fladderutvecklingsmiljön

För den här workshopen behöver du två programvara: Flutter SDK och en förläggare.

Du kan köra programmeringsverkstaden på en av följande enheter:

• En Android eller fysisk iOS -enhet ansluten till din dator och ställer in i utvecklarläget.
• IOS -simulatorn (Xcode -verktyg för att installera).
• Android -emulatorn (som måste konfigureras i Android Studio).
• En webbläsare (Chrome krävs för felsökning).
• Som Windows, Linux eller MacOS Desktop. Du måste utveckla din applikation på plattformen där du planerar att distribuera den. Om du till exempel vill utveckla en Windows Desktop -applikation måste du göra det på Windows för att komma åt lämplig kompileringskedja. Lär dig också om de specifika kraven för operativsystem, som är detaljerade på dokument.fladdra.Dev/skrivbord.

3. Ladda ner appen avgång för programmeringsverkstaden

Du har redan följt MDC-101-workshopen ?

Om du är klar med MDC-101-programmeringsverkstaden, bör din kod vara redo att starta den här workshopen. Gå till nästa steg: Lägg till en högre applikationsfält.

Du börjar från början ?

Ladda ner applikationen Start Workshop Departure

Startprogrammet finns i materialkomponent-flutter-kodelabs-102-starter_and_101-komplett/mdc_100_series .

… eller klona verkstaden från GitHub

För att klona denna programmeringsverkstad från GitHub, kör följande kommandon:

Git clone https: // github.Com/materialkomponenter/materialkomponenter-fladder-kodelabs.Git CD-materialkomponenter-Flutter-Codelabs/MDC_100_Series Git Checkout 102-starter_and_101-Complete

För hjälp, se kloningssektionen från GitHub

Välj rätt gren

MDC-101-programmeringsverkstäderna på 104 förlitar sig på varandra. Så när du är klar med koden för MDC-102-workshopen blir det startkoden för MDC-103-workshopen. Koden är uppdelad i flera grenar, som du kan visa listan med detta kommando:

Git filial -listan

För att visa den färdiga koden, gå till den 103-starter_and_102-kompletta grenen .

Öppna projektet och kör applikationen

1. Öppna projektet i utgivaren du väljer.
2. Följ instruktionerna om utgivaren du har valt. De är tillgängliga för punkten “Kör appen” (kör applikationen) på sidan Komma igång> Testkörning (första steg> test).

Framgångsrik operation. Sanctuary Connection-sidan från MDC-101-programmeringsverkstaden måste visas på din enhet.

Nu när anslutningsskärmen är på plats, låt oss lägga till några produkter i applikationen.

4. Lägg till en högre applikationsfält

För tillfället, om du klickar på knappen “Nästa” visas startskärmen med meddelandet “Du gjorde det!”(Du lyckades.))). Perfekt. Men vår användare har inget att göra och vet inte var han befinner sig i applikationen. För att hjälpa dig är det dags att lägga till navigering.

där navigering Avser komponenter, interaktioner, visuella indikatorer och informationsarkitektur som gör det möjligt för användare att navigera i en applikation. Det låter dig upptäcka innehåll och funktioner och enkelt utföra uppgifter.

För mer information, se artikeln som ägnas åt navigering i materialdesigninstruktionerna.

Materialdesign erbjuder navigationsformat som garanterar mycket användarvänlighet. En av de mest synliga komponenterna är den övre applikationsfältet.

Du kanske känner till detta element under namnet “Navigation Bar” under iOS, eller helt enkelt “Application Bar” eller “Header”.

För att erbjuda användare snabb åtkomst till andra åtgärder, låt oss lägga till en högre applikationsfält.

Lägg till en AppBar -widget

Hemma.Dart, lägg till en appbar till “Suffold” och ta sedan bort den const markerade:

Return Const Spaffold (// TODO: Lägg till App Bar (102) AppBar: AppBar (// TODO: Lägg till knappar och titel (102)), 

Tillägget avAppbar På AppBar -fältet: SNACHOLDING gör att vi kan få en perfekt och gratis layout, vilket lämnar applikationsfältet högst upp på sidan och under kroppen.

Byggnadsställning är en viktig widget i materialApps. Det ger praktiska API: er för att visa alla typer av aktuella frågor, till exempel paneler, “Snackbar” -meddelanden och nedre arkelement. Det underlättar till och med placeringen av en flytande åtgärdsknapp.

Kontakta Flutter -dokumentationen för att ta reda på mer om byggnadsställningar.

Spela in projektet. När helgedomen har uppdaterats klickar du på Nästa (Följande) för att visa hemskärmen.

Elementet är väl positionerat, men det saknar en titel.

Lägg till en textwidget

Hemma.Dart, lägg till en titel i appbar -applikationsfältet:

// TODO: Lägg till App Bar (102) AppBar: AppBar (// TODO: Lägg till knappar och titel (102) Titel: Const Text ('Shrine'), // TODO: Lägg till släpknappar (102) 

Spela in projektet.

Du kanske har märkt variationer för varje plattform. Materialdesignsystemet tar hänsyn till att varje plattform (Android, iOS, Web) är annorlunda och att användarförväntningarna är olika. Till exempel på iOS är titlarna nästan alltid centrerade. Detta är standardbeteendet som tillhandahålls av Uikit. På Android är de uppradade till vänster. Därför, om du använder en emulator eller en Android -enhet, bör din titel anpassas till vänster. När det gäller en simulator eller en iOS -enhet måste den vara centrerad.

Om du vill veta mer kan du se den här artikeln om anpassning till olika plattformar med materialdesign.

Många applikationsstänger har en knapp bredvid titeln. Lägg till en menyikon i vår applikation.

Lägg till en ikonsknappknapp i början av linjen

Alltid hemma.Dart, definiera ett ikonskuttonelement för det ledande fältet: för appbar -applikationsfältet. (Placera det före titelfältet: I enlighet med början från början till slutet av linjen):

 // TODO: Lägg till knappar och titel (102) Ledande: IconButton (ikon: const -ikon (ikoner.Meny, SemanticLabel: 'Meny',), onpressad: () < print('Menu button'); >, ))), 

Spela in projektet.

Menyikonen (även kallad “Hamburger”), visas på önskad plats.

Klassen Ikonoppon är ett praktiskt sätt att integrera materiella ikoner i din applikation. Hon använder en widget Ikon. Flutter har en komplett samling ikoner i klassrummet Ikoner. Ikoner importeras automatiskt enligt “Const” -kartläggningar.

För mer information om ICONS -klassen, se Flutter -dokumentationen. För mer information om ikonwidgeten, se Flutter -dokumentationen.

Du kan också lägga till knappar i slutet av linjen. I Flutter kallas dessa knappar “åtgärder”.

Villkor början Och SLUTET uttrycka betydelsen av läsning, oavsett det berörda språket. När du arbetar på en tunga som läser från vänster till höger, till exempel engelska, början betyder till vänster Och SLUTET betyder till höger. På ett språk som läser från höger till vänster, som arabiska, termen början betyder till höger, Och SLUTET betyder till vänster.

För att ta reda på mer om vändningen av användargränssnittet, kontakta materialdesigninstruktionerna om dubbelriktning.

Lägga till åtgärder

Det finns tillräckligt med utrymme för två andra ikonskuttonelement.

Lägg till dem i AppBar -instansen efter titeln:

// TODO: Lägg till bakknappar (102) Åtgärder: [IkonButton (ikon: const -ikon (ikoner.Sök, SemanticLabel: 'Search',), OntPresd: () < print('Search button'); >, ), IconButton (ikon: const -ikon (ikoner.melodi, SemanticLabel: 'Filter',), onPresd: () < print('Filter button'); >, ),], 

Spela in projektet. Din hemskärm ska uppstå enligt följande:

Applikationen har nu en knapp i början av linjen, en titel och två åtgärder till höger. Applikationsfältet har också en effekt avelevation På grund av en liten skugga som indikerar att det är på en annan nivå än den för innehållet.

I en ikonklass, fältet Semanticlabel är ett vanligt sätt att lägga till tillgänglighetsinformation för att fladdra. Det är ett system som är mycket nära Android -innehållsformulering och UIACCESSIBILITY FUNKTIONELTY på iOS AccessibilityLabelbel . Du hittar det i många kurser.

Informationen i detta område gör det möjligt att ge information om skärmläsare om denna knapps roll.

Om en widget inte har ett SemanticLabel -fält :, kan du kapsla in det i en widget Semantik. För mer information om semantikwidgeten, se Flutter -dokumentationen.

5. Lägg till ett ark i ett rutnät

Nu när vår applikation är lite mer strukturerad, låt oss organisera dess innehåll genom att placera dem i filer.

DE kort är oberoende element som visar innehållet och åtgärderna associerade med ett givet ämne. De erbjuder ett flexibelt sätt att presentera liknande innehåll i form av en samling.

För mer information, se artikeln som ägnas åt filer i materialdesigninstruktionerna.

För mer information om kortwidgeten (ark), se artikeln om skapandet av layouter i fladder.

Lägg till en GridView -widget

Låt oss börja med att lägga till ett ark under den övre applikationsfältet. För närvarande widgeten Kort (Ark) innehåller inte tillräckligt med information för att placera dig synligt. Vi kommer därför att kapsla in det i en widget Gridview.

Byt ut mitten i kroppen på ställningselementet med en gridview -widget:

// TODO: Lägg till en rutnätvy (102) kropp: Gridview.Räkna (CrossAxiscount: 2, Padding: Const EdgeInsts.Alla (16.0), Childaspectratio: 8.0/9.0, // TODO: Bygg ett rutnät med kort (102) barn: [kort ()],),), 

Låt oss analysera den här koden. Leverwidgeten kallar tillverkarens räkning (), eftersom antalet element som den visar kan räknas och inte är oändligt. Men han behöver ytterligare information för att definiera sin layout.

CrossAxisCount -variabeln: Anger antalet element per rad. Vi vill få två kolumner.

L ‘transversalsaxel i Flutter motsvarar den axel som vi inte bläddrar. Känslan av rullning kallas huvudaxel. Om du använder vertikal rullning, liksom standardfallet med GridView, är den tvärgående axeln horisontell.

För mer information, se sidan tillägnad att skapa layouter.

POLDING Field: Definierar ett ledigt utrymme på de fyra sidorna av GridView -widgeten. Naturligtvis är denna marginal inte synlig till följd av elementet eller under det, eftersom inget barn Gridview ännu har placerats bredvid detta element för tillfället.

Childaspecto -fältet: identifierar storleken på elementen i form av proportioner (bredd på höjd).

Som standard skapar GridView block av identisk storlek.

Vi har ett ark, men det är tomt. Lägg till barns widgetar i det här arket.

Sätta innehållet

Lakorna måste inkludera områden för en bild, en titel och sekundär text.

Uppdatera barn från GridView -widgeten:

// TODO: Bygg ett rutnät med kort (102) Barn: [Kort (ClipBehavior: Clip.Antialias, barn: kolumn (CrossAxisAlignment: CrossAxisAlignment.Start, barn: [Aspectratio (Aspectratio: 18.0/11.0, barn: Bild.Tillgång ('tillgångar/diamant.png '),), stoppning (stoppning: const edgeinsts.FromTrB (16.0, 12.0, 16.0, 8.0), Barn: Kolumn (CrossAxisAlignment: CrossAxisAlignment.Start, barn: [text ('titel'), const sizedbox (höjd: 8.0), text ('sekundär text'),],),),),),)]]]], 

Den här koden lägger till en kolumnwidget (kolumn) som gör att du kan ha barnwidgets vertikalt.

CrossAxisAlignment Parameter: Fält anger korsaxisjusteringsvärdet.Start, vilket betyder “Justera texten på” Sidan “-start” “.

Widgeten Bildförhållande Definierar proportionerna för den visade bilden, oavsett vilken typ av bild som tillhandahålls.

Element Stoppning definierar en marginal för texten.

De två widgetarna Text den ena över den andra placeras och separeras med åtta tomma rymdpunkter (Sizedbox))). Vi skapar ett annat element Kolumn att ge dem inre marginaler.

Spela in projektet.

I denna översikt kan du se att arket är placerat med en marginal, dess hörn är rundade och det projicerar en skugga (representerar dess höjd). Hela formuläret kallas “container” i materialdesignsystemet (för att inte förväxlas med widgetklassen som heter container).

Bortsett från behållaren är alla elementen i lakan valfria i material. Du kan lägga till rubriktext, ett klistermärke eller en avatar, en undertextext, separatorer och till och med finnar och ikoner.

För att ta reda på mer om innehållet i lakan, kontakta den här artikeln i materialdesigninstruktionerna.

Lakorna visas vanligtvis i en samling med andra ark. Ordna dem i form av en samling i ett rutnät.

6. Skapa en samling filer

När flera ark är närvarande på en skärm grupperas de i en eller flera samlingar. Filerna i en samling är Coplanar: de har alla samma höjd i vila (det vill säga när de inte väljs eller flyttas, vilket vi inte kommer att göra här).

Skapa en samling filer

För tillfället är vårt ark placerat i barnfältet: Gridview Grid. Detta leder till en stor mängd kapslad kod som kan vara svår att läsa. Låt oss förvandla denna del av koden till en funktion som gör att det kan generera så många tomma ark som behövs och returnera en lista med filer.

Skapa en privat funktion ovanför Build () -funktionen (kom ihåg att funktionerna som börjar med en understrykande linje är privata API: er):

// TODO: Gör en samling kort (102) List _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; > 

Tilldela filerna som genereras på barnfältet i GridView -widgeten. Glöm inte att Byt ut alla element som finns i GridView -widgeten med den här nya koden ::

// TODO: Lägg till en rutnätvy (102) kropp: Gridview.Räkna (CrossAxiscount: 2, Padding: Const EdgeInsts.Alla (16.0), Childaspectratio: 8.0/9.0, Barn: _BuildGridCards (10) // Ersätt), 

Spela in projektet.

Korten finns, men de visar ingenting för tillfället. Det är dags att lägga till produktdata.

Lägg till produktdata

Applikationen innehåller vissa produkter med bilder, namn och priser. Lägg till detta i de widgetar som redan finns i filen

Sedan hemma.Dart, importera ett nytt paket och några filer som anges för en datamodell:

Importera paket: fladder/material.Dart '; Importera paket: INTL/INTL.Dart '; Importera modell/produkt.Dart '; Importera 'Model/Products_Repository.Dart '; 

Slutligen, ändra _buildGridCards () för att hämta produktinformation och använda dessa data i filerna:

// TODO: Make A Collection of Cards (102) // Byt ut hela denna metodlista _BuildGridCards (BuildContext Context) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Slutliga temedata -tema = tema.av (sammanhang); Slutlig nummerformat formatter = nummerformat.Simplecurrent (lokal: lokaler.Localof (kontext).att stränga ()); Returprodukter.Karta ((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, ), ], ), ), ), ], ), ); >))).Att lista (); > 

LADE MÄRKE TILL : Vänta innan du startar sammanställningen och exekveringen. Det finns fortfarande en modifiering att göra.

För att formatera texten använder vi temadata Temedata från värdet BuildContext nuvarande.

För att lära dig mer om formateringen av texten, se artikeln om typografi i materialdesigninstruktionerna. För att ta reda på mer om formatering från ett tema, fortsätt efter denna programmeringsverkstad med MDC-103: Användning av teman för materialdesign (färg, former, höjd och typ).

Ändra också Build () -funktionen för att överföra värdet BuildContext på _buildGridCards () innan du startar sammanställningen:

// TODO: Lägg till en rutnätvy (102) kropp: Gridview.Räkna (CrossAxiscount: 2, Padding: Const EdgeInsts.Alla (16.0), Childaspectratio: 8.0/9.0, Barn: _BuildGridCards (Context) // Ändra kod), 

Starta om den heta applikationen.

Du kanske märker att vi inte lägger till vertikalt utrymme mellan filerna. Eftersom de har fyra marginaler i toppen och botten har.

Spela in projektet.

Den producerade data visas, men bilderna är omgiven av ett onödigt utrymme. Som standard ritas bilderna med fältet Boxfit definierad .Scaledown (i detta fall). Ersätt detta värde med .Fitwidth så att hon kan zooma in och ta bort det onödiga utrymmet.

Lägg till ett passande fält: som BoxFit -värdet.Fitwidth:

 // TODO: Justera lådstorleken (102) Fit: BoxFit.fitbredd, 

Våra produkter visas nu perfekt i applikationen.

7. Grattis !

Vår applikation erbjuder grundläggande drift som gör att användaren kan gå från anslutningsskärmen till en hemskärm där produkterna visas. Några kodrader räckte för att lägga till en högre applikationsfält (med en titel och tre knappar) och filer (för att presentera innehållet i vår applikation). Den erhållna hemskärmen är enkel och funktionell och har en grundläggande struktur och användbart innehåll.

Den färdiga versionen av MDC-102-applikationen är tillgänglig i 103-starter_and_102-complete-filialen .

Du kan jämföra din version på sidan med tillämpningen av den här grenen.

Följande steg

Med applikationsfältet, arket, textfältet och knappen som finns högst upp på sidan har vi nu använt fyra huvudkomponenter i materialfladderbiblioteket. För mer information, se katalogen över materialkomponenter.

Även om vår applikation fungerar perfekt återspeglar den inte en varumärkesidentitet eller en viss synvinkel. I MDC-103-verkstaden: Användning av teman för materialdesign (färg, former, höjd och typ) kommer vi att anpassa stilen på dessa komponenter för att uttrycka ett modernt och dynamiskt märke.

Förverkligandet av denna programmeringsverkstad bad mig om en tid och rimliga ansträngningar

Håller fullständigt med

Varken håller med eller håller med

Håller inte alls med

Jag vill fortsätta använda materialkomponenter

Håller fullständigt med

Varken håller med eller håller med

Håller inte alls med

Om inget annat anges styrs innehållet på denna sida av en kreativ Commons -uppdrag 4 -licens.0, och kodprover styrs av en Apache 2 -licens.0. Mer information finns i reglerna för Google Developers -webbplatsen. Java är ett registrerat varumärke som tillhör Oracle och/eller dess anslutna företag.