Hozzon létre egy Google Play Developer Fiókot – Hel utáni Központ – Pandasuite, MDC -102: Anyagszerkezet és elrendezés | Google Codelabs
MDC-102: Anyagszerkezet és elrendezés
Contents
- 1 MDC-102: Anyagszerkezet és elrendezés
- 1.1 Hozzon létre egy Google Play Developer fiókot
- 1.2 Hozzon létre egy Google Play Developer fiókot
- 1.3 MDC-102: Anyagszerkezet és elrendezés
- 1.4 Workshop Célok
- 1.5 Anyagpörgés Anyagkomponensek és alrendszerek ebben a programozási műhelyben
- 1.6 2. Konfigurálja a Flutter fejlesztési környezetet
- 1.7 3. Töltse le az indulási alkalmazást a programozási műhelyhez
- 1.8 Már követted az MDC-101 műhelyt ?
- 1.9 A semmiből indulsz ?
- 1.10 … Vagy klónozza a műhelyt a github -ból
- 1.11 Válassza ki a megfelelő ágot
- 1.12 Nyissa meg a projektet és hajtsa végre az alkalmazást
- 1.13 4. Adjon hozzá egy magasabb szintű alkalmazási sávot
- 1.14 Adjon hozzá egy AppBar widget
- 1.15 Adjon hozzá egy szöveg widget
- 1.16 Adjon hozzá egy ikonbutton gombot a sor elején
- 1.17 Adjon hozzá műveleteket
- 1.18 5. Adjon hozzá egy lapot egy rácsba
- 1.19 Adjon hozzá egy GridView widget
- 1.20 Helyezze a tartalmat
- 1.21 6. Hozzon létre egy fájlgyűjteményt
- 1.22 Hozzon létre egy fájlgyűjteményt
- 1.23 Adja hozzá a termékadatokat
- 1.24 7. Gratulálunk !
- 1.25 Következő lépések
Az anyagtervezés navigációs formátumokat kínál, amelyek garantálják a nagy könnyű használat. Az egyik legszembetűnőbb alkatrész a felső alkalmazás sáv.
Hozzon létre egy Google Play Developer fiókot
Tájékoztassa személyes adatait, a választott címét és a jelszavát.
Fogadja el az általános értékesítési feltételeket (GTC).
Adjon hozzá egy szép fényképet magadról.
Hozzon létre egy Google Play Developer fiókot
A Google Play Developer fiók létrehozásának eljárása sokkal egyszerűbb, mint az Apple -nél.
Csatlakozzon a Gmail címéhez.
Fogadja el a GTC -t.
Állítsa be a regisztrációs díjakat: Egyetlen 25 euró kifizetés az összes választott alkalmazás közzétételéhez !
Tájékoztassa a fiókjával kapcsolatos információkat: Fejlesztő neve, e -mail címe és telefonszáma.
Ez válaszolt a kérdésére ?
Köszönjük a megjegyzéseket, hogy problémát jelentett a megjegyzések benyújtása. kérlek, próbáld újra később.
Utolsó frissítés 2021. november 9 -én
Kapcsolódó cikkek
- Hozzon létre egy alkalmazást a Google Play Console -on
- Generálja az Android P12 tanúsítványt
- Exportálja az APK vagy AAB fájlt
- Közzétesz egy Android -alkalmazást
- Közzétesz egy Android alkalmazást a Play Áruházon kívül
- Közzéteszi a Google Play Áruházban
MDC-102: Anyagszerkezet és elrendezés
Anyagkomponensek (MDC) segítenek a fejlesztőknek az anyagtervezés megvalósításában. Az MDC egy mérnökök és felhasználói élmény szakemberek által tervezett, az MDC tucatnyi elegáns és funkcionális felhasználói interfész összetevőt kínál. Elérhető az Android, iOS, a Web és a Flutter számára.anyag.IO/Fejleszteni.
Az MDC-101 programozási műhelyben két anyagkomponens-elemet használt a kapcsolat oldal létrehozásához: Szövegmezők és gombok, amelyek “tinta” animációkat tartalmaznak. Ezekre az alapokra dagályozzuk az alkalmazásunkat navigáció, szerkezet és adatok hozzáadásával.
Workshop Célok
Ebben a programozási műhelyben létrehoz egy kezdőképernyőt Ereklyetartó, E-kereskedelmi kérelem ruházat és tárgyak eladására a házhoz. Ez a képernyő tartalmazza:
- Egy magasabb szintű alkalmazási sáv
- A rács formájában lévő termékek listája
Felhívjuk figyelmét, hogy ezt a programozási műhelyt a 3. anyag váltotta fel, a képernyőképek kivételével. Ennek ellenére ugyanazokat az információkat közvetítik.
Ez a programozási műhely a második a négy műhely közül, amely segít egy Sanctuary nevű termékhez való alkalmazás létrehozásában. Javasoljuk, hogy kövesse az összes programozási műhelyt, hogy apránként előrehaladjon a feladatokban. A programozási műhelyeket itt találja:
- MDC-101 Flutter: Az anyagkomponensek alapelvei
- MDC-103 Flutter: Az anyagtervezés témáinak használata (szín, formák, magasság és típus)
- MDC-104 Flutter: Fejlett anyagtervezési alkatrészek
Anyagpörgés Anyagkomponensek és alrendszerek ebben a programozási műhelyben
- Felső
- Rács
- Kártyás kártyák
Ebben a programozási műhelyben a Material Flutter által biztosított alapértelmezett alkatrészeket fogja használni. Megtanulja testreszabni őket az MDC-103 szakaszban: Az anyagtervezés témáinak használata (szín, formák, magasság és típus).
Hogyan értékelné a Flutter fejlesztési tapasztalatait ?
2. Konfigurálja a Flutter fejlesztési környezetet
Ehhez a műhelyhez két szoftverre van szüksége: a Flutter SDK és a Kiadó.
A programozási műhelyt a következő eszközök egyikén futtathatja:
- Android vagy fizikai iOS -eszköz, amely csatlakozik a számítógépéhez, és fejlesztő módban van beállítva.
- Az iOS szimulátor (Xcode eszközök telepítéséhez).
- Az Android emulátor (amelyet az Android Studio -ban kell konfigurálni).
- Böngésző (króm szükséges a hibakereséshez).
- Mint Windows, Linux vagy MacOS asztal. Az alkalmazását azon a platformon kell kidolgoznia, ahol azt tervezi, hogy telepítse. Például, ha Windows asztali alkalmazást szeretne fejleszteni, akkor a Windows -on kell megtennie a megfelelő összeállítási lánc eléréséhez. Ismerje meg az operációs rendszerekre vonatkozó konkrét követelményeket is, amelyek részletesek a DOC -kban.csapkod.Dev/asztali számítógép.
3. Töltse le az indulási alkalmazást a programozási műhelyhez
Már követted az MDC-101 műhelyt ?
Ha befejezte az MDC-101 programozási műhelyt, akkor a kódnak készen kell állnia arra, hogy elindítsa ezt a műhelyt. Menj a következő szakaszba: Adjon hozzá egy magasabb szintű alkalmazási sávot.
A semmiből indulsz ?
Töltse le a kezdő műhely indulási alkalmazását
A kezdő alkalmazás az anyagkomponensű-flutter-Codelabs-102-starter_and_101-PLETE/MDC_100_Series-ben található .
… Vagy klónozza a műhelyt a github -ból
A programozási műhely klónozásához a GitHub -ból futtassa a következő parancsokat:
Git klón https: // github.Com/Anyagkomponensek/Anyagkomponensek-Flutter-Codelabs.Git CD anyagkomponensek-Flutter-Codelabs/MDC_100_Series GIT Checkout 102-Starter_and_101-PLETE
Segítségért lásd a GitHub klónozási szakaszát
Válassza ki a megfelelő ágot
Az MDC-101 programozási műhelyek 104-nél támaszkodnak egymásra. Tehát, amikor befejezi az MDC-102 műhely kódját, ez lesz az MDC-103 műhely kiindulási kódja. A kód több ágra oszlik, amelyek a listát ezen a paranccsal jeleníthetik meg:
Git ág -lista
A kész kód megjelenítéséhez lépjen a 103-starter_and_102-complete ágra .
Nyissa meg a projektet és hajtsa végre az alkalmazást
- Nyissa meg a projektet az Ön által választott kiadóban.
- Kövesse a választott kiadóval kapcsolatos utasításokat. Ezek hozzáférhetők az “alkalmazás futtatásához” bekezdéshez (az alkalmazás végrehajtása) a GET STAD> Test Drive oldalon (Első lépések> Teszt).
Sikeres művelet. Meg kell jeleníteni a Sanctuary Connection oldalt az MDC-101 programozási műhelyről.
Most, hogy a csatlakozási képernyő a helyén van, adjunk hozzá néhány terméket az alkalmazáshoz.
4. Adjon hozzá egy magasabb szintű alkalmazási sávot
Jelenleg, ha rákattint a “Next” gombra, akkor a kezdőképernyő megjelenik a “Megcsináltál!”(Sikerült.)). Tökéletes. Felhasználónknak azonban nincs mit tennie, és nem tudja, hol van az alkalmazásban. Hogy segítsen neked, itt az ideje hozzáadni a navigációt.
Ott navigáció Az összetevőkre, interakciókra, vizuális indikátorokra és információs architektúrára utal, amelyek lehetővé teszik a felhasználók számára, hogy navigáljanak egy alkalmazásban. Ez lehetővé teszi a tartalom és szolgáltatások felfedezését, valamint a feladatok egyszerű végrehajtását.
Ha többet szeretne megtudni, olvassa el a navigációnak szentelt cikket az anyagtervezési utasításokban.
Az anyagtervezés navigációs formátumokat kínál, amelyek garantálják a nagy könnyű használat. Az egyik legszembetűnőbb alkatrész a felső alkalmazás sáv.
Lehet, hogy ismeri ezt az elemet a “navigációs sáv” néven az iOS alatt, vagy egyszerűen “Alkalmazási sáv” vagy “Header”.
Annak érdekében, hogy a felhasználók számára gyors hozzáférést biztosítson az egyéb műveletekhez, adjunk hozzá egy magasabb alkalmazási sávot.
Adjon hozzá egy AppBar widget
Otthon.Dart, adjon hozzá egy AppBAR -t az “állványhoz”, majd törölje a kiemelt const:
Visszatérés const állvány (// TODO: Add APP Bar (102) AppBar: AppBar (// TODO: Gombok hozzáadása és címe (102)),
AAppbar Az AppBar mezőn: Az állványok lehetővé teszik, hogy tökéletes és ingyenes elrendezést szerezzünk, és az alkalmazás sávját az oldal tetején és a test alatt hagyjuk.
Állvány fontos widget a materialApps -ban. Gyakorlati API -ket biztosít mindenféle jelenlegi kérdések, például panelek, “snackbar” értesítési rudak és alsó lap elemek megjelenítéséhez. Még megkönnyíti a lebegő akciógomb elhelyezését.
Olvassa el a Flutter dokumentációt, hogy többet megtudjon az állványról.
Rögzítse a projektet. Miután a szentély frissült, kattintson a gombra Következő (Követni) a kezdőképernyő megjelenítéséhez.
Az elem jól elhelyezett, de hiányzik a cím.
Adjon hozzá egy szöveg widget
Otthon.Dart, adj hozzá egy címet az AppBar alkalmazás sávjához:
// TODO: Adjon hozzá alkalmazási sávot (102) AppBar: AppBar (// TODO: Gombok hozzáadása és címe (102) Cím: const szöveg ('szentély'), // todo: Hozzáadási gombok hozzáadása (102)
Rögzítse a projektet.
Lehet, hogy minden platformon észrevette a variációkat. Az anyagtervező rendszer figyelembe veszi, hogy az egyes platformok (Android, iOS, Web) eltérnek, és hogy a felhasználói elvárások eltérőek. Például az iOS -on a címek szinte mindig központosak. Ez az UIKIT által biztosított alapértelmezett viselkedés. Androidon a bal oldalon vannak sorakozva. Ezért, ha emulátort vagy android eszközt használ, akkor a címet a bal oldalon kell igazítani. Szimulátor vagy iOS -eszköz esetében központosítani kell.
Ha többet szeretne megtudni, olvassa el a különféle anyagtervezésű platformokhoz való alkalmazkodásról szóló cikket.
Sok alkalmazásbárnak van egy gombja a cím mellett. Adjon hozzá egy menü ikont az alkalmazásunkhoz.
Mindig otthon.Dart, határozzon meg egy ikonbutton elemet a vezető mezőhez: az AppBar alkalmazás sávból. (Helyezze a cím mező elé: a sor kezdetétől a végéig a végéig):
// TODO: Gombok hozzáadása és címe (102) Vezető: IconButton (ikon: const ikon (ikonok (ikonok.Menü, szemantikai label: 'menü',), onpressed: () < print('Menu button'); >, )),
Rögzítse a projektet.
A menü ikon (más néven “hamburger”) jelenik meg a kívánt helyen.
Osztály Ikongutton az anyagi ikonok alkalmazásába történő integrálásának gyakorlati módja. Widget használ Ikon. A Flutternek teljes ikongyűjteménye van az osztályteremben Ikonok. Az ikonokat automatikusan importálják a “const” csatorna leképezések szerint.
Ha többet szeretne megtudni az ikonok osztályáról, lásd a Flutter dokumentációt. Ha többet szeretne megtudni az ikon widgetről, lásd a Flutter dokumentációt.
A vonal végén is hozzáadhat gombokat. A Flutter esetében ezeket a gombokat “műveleteknek” nevezzük.
Kifejezés kezdet És Vége fejezze ki az olvasás jelentését, függetlenül az érintett nyelvtől. Amikor balról jobbra olvasol, például angolul dolgozik, például angolul, kezdet eszközök balra És Vége eszközök jobbra. Olyan nyelven, amely jobbról balra olvasható, mint arab, a kifejezés kezdet eszközök jobbra, És Vége eszközök balra.
Ha többet szeretne megtudni a felhasználói felület megfordításáról, olvassa el a kétirányú anyagtervezési utasításokat.
Adjon hozzá műveleteket
Elegendő hely van két másik ikonbutton elemhez.
Adja hozzá őket az AppBar példányhoz a cím után:
// TODO: Hozzáadási gombok hozzáadása (102) Műveletek: [IconButton (ikon: const ikon (ikonok (ikonok.Search, SemanticLabel: 'Search',), OntPresd: () < print('Search button'); >, ), Ikongutton (ikon: const ikon (ikonok.dallam, szemantababel: 'szűrő',), onpresd: () < print('Filter button'); >, ),],
Rögzítse a projektet. A kezdőképernyőnek az alábbiak szerint kell felmerülnie:
Az alkalmazásnak most van egy gombja a sor elején, a cím és a jobb oldalon két művelet. Az alkalmazási sávnak is van hatásamagasság egy enyhe árnyalat miatt, amely azt jelzi, hogy a tartalom szintjétől eltérő szinten van.
Egy ikon osztályban a mező Szemantikai lánc az akadálymentesség -információk hozzáadásának általános módja a Flutterhez. Ez egy olyan rendszer, amely nagyon közel van az Android tartalom megfogalmazásához és az iOS -hozzáférési funkciókhoz . Sok kurzuson megtalálja.
Az ezen a területen található információk lehetővé teszik a képernyőolvasókról szóló információk megadását a gomb szerepében.
Ha egy widgetnek nincs szemantablak mezője:, beágyazhatja azt egy widgetbe Szemantika. Ha többet szeretne megtudni a Semantics Widgetről, lásd a Flutter dokumentációt.
5. Adjon hozzá egy lapot egy rácsba
Most, hogy alkalmazásunk egy kicsit strukturáltabb, szervezzük meg tartalmát a fájlokba helyezve.
A kártyás kártyák független elemek, amelyek megjelenítik az adott témához kapcsolódó tartalmat és műveleteket. Rugalmas módszert kínálnak hasonló tartalom bemutatására egy gyűjtemény formájában.
További információkért lásd az Anyagtervezési utasítások fájljainak szentelt cikket.
Ha többet szeretne megtudni a Card Widgetről (SHAP), olvassa el az elrendezések létrehozásáról szóló cikket.
Adjon hozzá egy GridView widget
Kezdjük azzal, hogy hozzáadunk egy lapot a felső alkalmazás sávjába. Jelenleg a widget Kártya (Lap) nem tartalmaz elegendő információt ahhoz, hogy láthatóan elhelyezze magát. Ezért beágyazzuk egy widgetbe Rácsnézet.
Cserélje ki az állvány elem testének középpontját egy GridView widgetre:
// TODO: Adjon hozzá egy rács nézetet (102) test: GridView.Count (CrossaxisCount: 2, Padding: const Edgeinsts.Mindez (16.0), Childaspectratio: 8.0/9.0, // todo: Kártyák rács készítése (102) Gyerekek: [kártya ()],),),
Elemezzük ezt a kódot. A Griver widget a gyártó számát () hívja, mivel a megjelenített elemek száma megszámolható, és nem végtelen. De további információkra van szüksége az elrendezés meghatározásához.
A CrossaxisCount változó: jelzi az elemek számának számát. Két oszlopot akarunk szerezni.
L ‘transzverzális tengely A Flutter -ben megfelel annak a tengelynek, amelyet nem görgetünk. A görgetési érzést hívják fő tengely. Ha függőleges görgetést használ, mint az alapértelmezett eset a GridView esetében, a keresztirányú tengely vízszintes.
További információkért lásd az elrendezések létrehozására szolgáló oldalt.
A párnázási mező: meghatározza a szabad helyet a GridView widget négy oldalán. Természetesen ez a margó nem látható az elem vagy annak alatta lévő eredményeként, mert egyelőre még nem került ez az elem mellé.
A Childaspecto mező: Az elemek méretét azonosítja arányok formájában (a magasság szélessége).
Alapértelmezés szerint a GridView azonos méretű blokkokat hoz létre.
Van egy lapunk, de üres. Adjon hozzá gyermekek kütyüket ehhez a laphoz.
Helyezze a tartalmat
A lapoknak tartalmazniuk kell a kép, a cím és a másodlagos szöveg területeit.
Frissítse a gyermekeket a GridView widgetről:
// todo: Kártyák rács készítése (102) Gyerekek: [Kártya (clipbehavior: klip.Antialias, gyermek: oszlop (CrossaxisAlignment: CrossaxisAlignment.Kezdje, gyerekek: [Aspectratio (AspectRatio: 18.0/11.0, gyermek: kép.Eszköz ('eszközök/gyémánt.Png '),), párnázás (párnázás: const Edgeinsts.FromLTRB -től (16.0, 12.0, 16.0, 8.0), gyermek: oszlop (CrossaxisAlignment: CrossaxisAlignment.Kezdje, gyerekek: [szöveg ('cím'), const méretű doboz (magasság: 8.0), szöveg ('másodlagos szöveg'),],),],),)]],
Ez a kód hozzáad egy oszlop widget (oszlop), amely lehetővé teszi a gyermekek kütyüinek függőlegesen.
A CrossaxisAllignment paraméter: A mező meghatározza a CrossaxisAllignment értéket.Start, ami azt jelenti, hogy “igazítsa a szöveget a” sor kezdete “oldalán.
A widget Aspektratio meghatározza a megjelenített kép arányát, függetlenül a rendelkezésre álló kép típusától.
Az elem Párnázás meghatározza a szöveg margóját.
A két kütyü Szöveg Az egyiket a másik felett nyolc üres űrponttal helyezzük el, és elválasztják (Méretezőgép)). Készítünk egy másik elemet Oszlop hogy belső haszonkulcsokat adjon nekik.
Rögzítse a projektet.
Ebben az áttekintésben láthatja, hogy a lap margóval van elhelyezve, a sarkok lekerekítettek, és árnyékot vetítenek ki (jelezve a magasságát). A teljes űrlapot “konténer” -nek hívják az anyagtervező rendszerben (nem szabad összetéveszteni a Container nevű widget osztályt).
A tartályon kívül a lapok összes eleme opcionális anyagban. Hozzáadhat fejléc szöveget, matricát vagy egy avatárt, egy felirat -szöveget, elválasztókat, sőt pattanásokat és ikonokat is.
Ha többet szeretne megtudni a lapok tartalmáról, olvassa el ezt a cikket az anyagtervezési utasításokban.
A lapok általában egy kollekcióban jelennek meg más lapokkal. Rendezze őket egy rácsban történő gyűjtemény formájában.
6. Hozzon létre egy fájlgyűjteményt
Amikor több lap van a képernyőn, akkor egy vagy több gyűjteménybe csoportosítanak. A gyűjtemény fájljai Coplanar: Ugyanazok a magasságuk van nyugalomban (vagyis amikor nem választják ki vagy mozgatják őket, amit itt nem fogunk megtenni).
Hozzon létre egy fájlgyűjteményt
Jelenleg a lapunk a gyerekek mezőjében van elhelyezve: GridView rács. Ez nagy mennyiségű beágyazott kódhoz vezet, amelyet nehéz lehet olvasni. Vegyük át a kód ezt a részét olyan funkcióvá, amely lehetővé teszi a szükséges sok üres lap létrehozását, és a fájlok listájának visszaküldését.
Hozzon létre egy privát funkciót a build () funkció felett (ne feledje, hogy az alullósító vonaltól kezdődő funkciók privát API -k):
// TODO: Készítsen egy kártyagyűjteményt (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'), ], ), ), ], ), ); >, ); Visszaküldési kártyák; >
Rendelje hozzá a GridView widget gyermekmezőjén előállított fájlokat. ne felejtsd el Cserélje ki a GridView widgetben található összes elemet erre az új kódra ::
// TODO: Adjon hozzá egy rács nézetet (102) test: GridView.Count (CrossaxisCount: 2, Padding: const Edgeinsts.Mindez (16.0), Childaspectratio: 8.0/9.0, Gyerekek: _buildgridcards (10) // Cserélje ki),
Rögzítse a projektet.
A kártyák vannak jelen, de egy pillanatra semmit sem jelenítenek meg. Eljött az idő, hogy hozzáadja a termékadatokat.
Adja hozzá a termékadatokat
Az alkalmazás tartalmaz néhány terméket, képeket, neveket és árakat. Adja hozzá ezt a fájlban már meglévő kütyühez
Aztán otthon.DART, importáljon egy új csomagot és néhány fájlt egy adatmodellhez:
Import 'csomag: Flutter/Anyag.Dart '; Import 'csomag: INTL/INTL.Dart '; Import 'modell/termék.Dart '; Import 'Model/Products_Repository.Dart ';
Végül módosítsa a _buildGridCards () -et a termékinformációk lekéréséhez és ezeket az adatokat a fájlokban:
// TODO: Készítsen kártyák gyűjteményét (102) // Cserélje ki ezt a teljes módszerlistát _buildGridCards (BuildContext Context) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Végső Themedata téma = téma.(kontextus); Végső számú forma formater = numberFormat.Egyszerűsítés (helyi: helyiségek.Localof (kontextus).toString ()); Visszatérő termékek.Térkép (termék) < 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 (); >
MEGJEGYEZTE : Várjon, mielőtt elindítja az összeállítást és a végrehajtást. Továbbra is módosítani kell.
A szöveg formázásához a téma adatait használjuk Themedata az értékből BuildContext jelenlegi.
Ha többet szeretne megtudni a szöveg formázásáról, olvassa el az Anyagtervezési utasítások tipográfiájáról szóló cikket. Ha többet szeretne megtudni egy téma formázásáról, folytassa az MDC-103 programozási műhely után: Az anyagtervezés témáinak használata (szín, formák, magasság és típus).
Módosítsa az érték továbbításához a Build () funkciót is BuildContext a _buildGridCards () telefonszámon, mielőtt elindítaná az összeállítást:
// TODO: Adjon hozzá egy rács nézetet (102) test: GridView.Count (CrossaxisCount: 2, Padding: const Edgeinsts.Mindez (16.0), Childaspectratio: 8.0/9.0, Gyerekek: _buildgridcards (kontextus) // Kód módosítása),
Indítsa újra a forró alkalmazást.
Előfordulhat, hogy nem adunk hozzá függőleges helyet a fájlok között. Mert a felső és az alsó négy szélességük van.
Rögzítse a projektet.
Megjelennek a gyártott adatok, de a képeket felesleges hely veszi körül. Alapértelmezés szerint a képeket a mezővel rajzolják Boxfit meghatározott .Scaledown (ebben az esetben). Cserélje ki ezt az értéket .Fitszélesség, hogy nagyítson és eltávolítson a felesleges teret.
Adjon hozzá egy illeszkedő mezőt: Mint a boxfit értéket.FitWidth:
// todo: Állítsa be a doboz méretét (102) Fit: BoxFit.fitszélesség,
Termékeink most tökéletesen megjelennek az alkalmazásban.
7. Gratulálunk !
Alkalmazásunk alapvető műveletet kínál, amely lehetővé teszi a felhasználó számára, hogy a csatlakozás képernyőről egy kezdőképernyőre léphessen, ahol a termékek megjelennek. Néhány kódsor elegendő volt egy magasabb alkalmazás sáv hozzáadásához (címmel és három gombbal) és fájlokkal (az alkalmazásunk tartalmának bemutatásához). A kapott kezdőképernyő egyszerű és funkcionális, alapvető struktúrával és használható tartalmával rendelkezik.
Az MDC-102 alkalmazás kitöltött verziója elérhető a 103-starter_and_102-kiegészítő ágban .
Összehasonlíthatja verzióját az oldalon az ág alkalmazásával.
Következő lépések
Az alkalmazási sáv, a lap, a szövegmező és az oldal tetején található gombbal most már az Anyag Flutter könyvtár négy fő elemét használtuk. Ha többet szeretne megtudni, lásd az anyagkomponensek katalógusát.
Még ha alkalmazásunk is tökéletesen működik, ez nem tükrözi a márka identitását vagy egy adott szempontot. Az MDC-103 műhelyben: Az anyagtervezés (szín, formák, magasság és típus) témáinak használata személyre szabjuk ezen alkatrészek stílusát, hogy kifejezzük egy modern és dinamikus márkát.
Ennek a programozási műhelynek a megvalósítása egy időt és ésszerű erőfeszítéseket kért tőlem
Teljesen egyetértek
Sem egyetért, és nem ért egyet
Egyáltalán nem ért egyet
Folytatni akarom az anyagkomponensek használatát
Teljesen egyetértek
Sem egyetért, és nem ért egyet
Egyáltalán nem ért egyet
Eltérő rendelkezés hiányában az oldal tartalmát a Creative Commons megbízás 4 licenc szabályozza.0, és a kódmintákat az Apache 2 licenc szabályozza.0. További információkért lásd a Google Developers webhely szabályait. A Java az Oracle és/vagy kapcsolt társaságok bejegyzett védjegye.