Utwórz konto programistów Google Play – Centrum pomocy – Pandasuite, MDC -102: Struktura materiału i układ | Google Codelabs
MDC-102: Struktura materiału i układ
Contents
- 1 MDC-102: Struktura materiału i układ
- 1.1 Utwórz konto programisty Google Play
- 1.2 Utwórz konto programisty Google Play
- 1.3 MDC-102: Struktura materiału i układ
- 1.4 Cele warsztatowe
- 1.5 Materiał Materiału Materiał i podsystemy w tych warsztatach programistycznych
- 1.6 2. Skonfiguruj środowisko programistyczne Trzepotanie
- 1.7 3. Pobierz aplikację odlotu na warsztat programowania
- 1.8 Śledziłeś już warsztat MDC-101 ?
- 1.9 Zaczynasz od zera ?
- 1.10 … Lub sklonik warsztat z Github
- 1.11 Wybierz właściwą gałąź
- 1.12 Otwórz projekt i wykonaj aplikację
- 1.13 4. Dodaj wyższy pasek aplikacji
- 1.14 Dodaj widżet AppBar
- 1.15 Dodaj widżet tekstowy
- 1.16 Dodaj przycisk IconButton na początku linii
- 1.17 Dodaj działania
- 1.18 5. Dodaj arkusz w siatce
- 1.19 Dodaj widżet Gridview
- 1.20 Umieść zawartość
- 1.21 6. Utwórz zbiór plików
- 1.22 Utwórz zbiór plików
- 1.23 Dodaj dane produktu
- 1.24 7. Gratulacje !
- 1.25 Następujące kroki
Projektowanie materiałów oferuje formaty nawigacyjne, które gwarantują dużą łatwość użytkowania. Jednym z najbardziej widocznych elementów jest górny pasek aplikacji.
Utwórz konto programisty Google Play
Poinformuj swoje dane osobowe, wybrany adres i hasło.
Zaakceptuj ogólne warunki sprzedaży (GTC).
Dodaj fajne zdjęcie.
Utwórz konto programisty Google Play
Procedura tworzenia konta programistów Google Play jest znacznie prostsza niż w Apple.
Połącz się z adresem Gmaila.
Zaakceptuj GTC.
Dostosuj opłaty rejestracyjne: pojedyncza płatność w wysokości 25 euro w celu opublikowania wszystkich wybranych wniosków !
Poinformuj informacje dotyczące Twojego konta: Nazwa programisty, adres e -mail i numer telefonu.
To odpowiedziało na twoje pytanie ?
Dziękujemy za komentarze, wystąpił problem z przesłaniem komentarzy. Spróbuj ponownie później.
Ostatnia aktualizacja 9 listopada 2021
Powiązane artykuły
- Utwórz aplikację w konsoli Google Play
- Wygeneruj certyfikat Androida P12
- Wyeksportuj plik APK lub AAB
- Opublikuj aplikację na Androida
- Publikuj aplikację na Androida poza sklepem Play Store
- Publikuj w Google Play Store
MDC-102: Struktura materiału i układ
Komponenty materiałowe (MDC) pomaga programistom wdrażać projektowanie materiałów. Zaprojektowany przez zespół inżynierów i specjalistów od obsługi w Google, MDC oferuje dziesiątki eleganckich i funkcjonalnych komponentów interfejsu użytkownika. Jest dostępny na Android, iOS, sieć i trzepot.materiał.IO/Rozwój.
W warsztacie programowania MDC-101 użyłeś dwóch elementów komponentów materialnych, aby utworzyć stronę połączenia: pola tekstowe i przyciski zawierające animacje „atramentowe”. W tych podstawach wzbogacajmy naszą aplikację, dodając nawigację, strukturę i dane.
Cele warsztatowe
W tych warsztatach programowania utworzysz ekran główny dla Świątynia, Aplikacja e-commerce do sprzedaży odzieży i przedmiotów do domu. Ten ekran będzie zawierał:
- Wyższy pasek aplikacji
- Lista produktów w postaci siatki
Należy pamiętać, że ten warsztat programowania został zastąpiony materiałem 3, z wyjątkiem ekranów. Niemniej jednak przekazują te same informacje.
To warsztaty programowe to drugi z czterech warsztatów, które pomogą utworzyć aplikację dla produktu o nazwie Sanctuary. Zalecamy śledzenie wszystkich warsztatów programistycznych w kolejności, aby stopniowo postępować w zadaniach. Znajdziesz tutaj warsztaty programowania:
- MDC-101 FUTRET: Podstawowe zasady komponentów materialnych
- MDC-103 FUTRET: Użycie motywów projektowania materiału (kolor, kształty, wysokość i typ)
- MDC-104 FUTRET: Zaawansowane komponenty projektowe materiału
Materiał Materiału Materiał i podsystemy w tych warsztatach programistycznych
- Górny
- Siatki
- Karty
W tych warsztatach programistycznych użyjesz domyślnych komponentów dostarczanych przez materiał Turt. Nauczysz się dostosowywać je w sekcji MDC-103: Wykorzystanie motywów projektowania materiału (kolor, kształty, wysokość i typ).
Jak oceniłbyś swój poziom doświadczenia w rozwoju z trzepotem ?
2. Skonfiguruj środowisko programistyczne Trzepotanie
Do tych warsztatów potrzebujesz dwóch oprogramowania: The Flutter Sdk i wydawcy.
Możesz uruchomić warsztat programowania na jednym z następujących urządzeń:
- Android lub fizyczne urządzenie iOS podłączone do komputera i ustawione w trybie programistów.
- Symulator iOS (narzędzia XCode do instalacji).
- Emulator Androida (który należy skonfigurować w Android Studio).
- Przeglądarka (chrom jest wymagany do debugowania).
- Jako system Windows, Linux lub MacOS. Musisz opracować swoją aplikację na platformie, na której planujesz ją wdrożyć. Na przykład, jeśli chcesz opracować aplikację komputerową Windows, musisz to zrobić w systemie Windows, aby uzyskać dostęp do odpowiedniego łańcucha kompilacji. Dowiedz się także o konkretnych wymaganiach dotyczących systemów operacyjnych, które są szczegółowo opisane w dokumentach.trzepotanie.Dev/Desktop.
3. Pobierz aplikację odlotu na warsztat programowania
Śledziłeś już warsztat MDC-101 ?
Jeśli skończyłeś warsztat programowania MDC-101, kod powinien być gotowy na rozpoczęcie tego warsztatu. Przejdź do następnego etapu: Dodaj wyższy pasek aplikacji.
Zaczynasz od zera ?
Pobierz aplikację odlotów początkowych
Aplikacja początkowa znajduje się w komponent-komponent-Flutter-Codelabs-102-Starter_and_101-Complete/MDC_100_Series .
… Lub sklonik warsztat z Github
Aby sklonować te warsztaty programowania z GitHub, uruchom następujące polecenia:
Git Clone https: // github.COM/komponentki materiałowe/komponenty materiałowe-kodelab-fluter.GIT CD-komponents-Flutter-Codelabs/MDC_100_Series GIT Checkout 102-Starter_and_101-Complete
Aby uzyskać pomoc, zobacz sekcję klonowania z github
Wybierz właściwą gałąź
Warsztaty programowe MDC-101 przy 104 polegają na sobie. Więc kiedy zakończysz kod warsztatu MDC-102, staje się on kodem początkowym warsztatów MDC-103. Kod jest podzielony na kilka gałęzi, które można wyświetlić listę za pomocą tego polecenia:
Git gałąź – -lista
Aby wyświetlić gotowy kod, przejdź do oddziału 103-starter_and_102 .
Otwórz projekt i wykonaj aplikację
- Otwórz projekt w wybranym przez ciebie wydawcy.
- Postępuj zgodnie z instrukcjami dotyczącymi wybranego wydawcy. Są one dostępne do akapitu „Uruchom aplikację” (wykonaj aplikację) na stronie Get Start> Drive Test Drive (pierwsze kroki> Test).
Udana operacja. Strona połączenia sanktuarium z warsztatu programowania MDC-101 musi być wyświetlana na urządzeniu.
Teraz, gdy ekran połączenia jest na miejscu, dodajmy kilka produktów do aplikacji.
4. Dodaj wyższy pasek aplikacji
Na razie, jeśli klikniesz przycisk „Dalej”, ekran główny jest wyświetlany z komunikatem „Zrobiłeś to!” (Udało Ci się.)). Doskonały. Jednak nasz użytkownik nie ma nic do roboty i nie wie, gdzie jest w aplikacji. Aby ci pomóc, nadszedł czas, aby dodać nawigację.
Tam nawigacja odnosi się do komponentów, interakcji, wskaźników wizualnych i architektury informacji, które pozwalają użytkownikom nawigować w aplikacji. Pozwala odkrywać treści i funkcje oraz łatwo wykonywać zadania.
Aby dowiedzieć się więcej, zapoznaj się z artykułem poświęconym nawigacji w instrukcjach projektowania materiałów.
Projektowanie materiałów oferuje formaty nawigacyjne, które gwarantują dużą łatwość użytkowania. Jednym z najbardziej widocznych elementów jest górny pasek aplikacji.
Możesz znać ten element pod nazwą „Pasek nawigacyjny” w iOS lub po prostu „pasek aplikacji” lub „nagłówek”.
Aby zaoferować użytkownikom szybki dostęp do innych działań, dodajmy wyższy pasek aplikacji.
Dodaj widżet AppBar
W domu.DART, dodaj pasek appbar do „rusztowania”, a następnie usuń podświetlony stał:
Return const rusztowanie (// todo: Dodaj pasek aplikacji (102) AppBar: AppBar (// todo: Dodaj przyciski i tytuł (102)),
DodanieAppBar Na polu AppBar: rusztowanie pozwala nam uzyskać idealny i bezpłatny układ, pozostawiając pasek aplikacji u góry strony i poniżej ciała.
Szafot jest ważnym widżetem w MaterialApps. Zapewnia praktyczne interfejsy API do wyświetlania wszelkiego rodzaju bieżących elementów spraw, takich jak panele, proszki powiadomienia „Snackbar” i dolne elementy arkusza. Ułatwia nawet umieszczenie pływającego przycisku akcji.
Skonsultuj się z dokumentacją trzepotania, aby dowiedzieć się więcej o rusztowaniu.
Nagraj projekt. Po zaktualizowaniu sanktuarium kliknij Następny (Następnie) Aby wyświetlić ekran główny.
Element jest dobrze ustawiony, ale brakuje mu tytułu.
Dodaj widżet tekstowy
W domu.Dart, dodaj tytuł do paska aplikacji AppBar:
// TODO: Dodaj pasek aplikacji (102) AppBar: AppBar (// todo: Dodaj przyciski i tytuł (102) Tytuł: Const Text („Shrine”), // TODO: Dodaj przyciski końcowe (102)
Nagraj projekt.
Być może zauważyłeś warianty dla każdej platformy. System projektowania materiałów bierze pod uwagę, że każda platforma (Android, iOS, Web) jest inna i że oczekiwania użytkowników są różne. Na przykład na iOS tytuły są prawie zawsze wyśrodkowane. Jest to domyślne zachowanie dostarczone przez UIKIT. Na Androidzie są one ustawione po lewej stronie. Dlatego jeśli używasz emulatora lub urządzenia z Androidem, tytuł powinien być wyrównany po lewej stronie. W przypadku symulatora lub urządzenia iOS należy go wyśrodkować.
Aby dowiedzieć się więcej, zapoznaj się z tym artykułem na temat adaptacji na różne platformy z projektowaniem materiałów.
Wiele pasków aplikacji ma przycisk obok tytułu. Dodaj ikonę menu do naszej aplikacji.
Dodaj przycisk IconButton na początku linii
Zawsze w domu.DART, zdefiniuj element iconButton dla wiodącego pola: paska aplikacji AppBar. (Umieść go przed polem tytułowym: zgodnie z początkiem od początku do końca linii):
// TODO: Dodaj przyciski i tytuł (102) Wiodący: iconButton (ikona: const ikona (ikony.Menu, semanticlabel: „menu”,), onpressed: () < print('Menu button'); >, )),
Nagraj projekt.
Ikona menu (zwana także „Hamburger”), pojawia się w pożądanej lokalizacji.
Klasa IconButton to praktyczny sposób zintegrowania ikon materialnych z aplikacją. Używa widżetu Ikona. Flutter ma pełną kolekcję ikon w klasie Ikony. Ikony są automatycznie importowane zgodnie z mapami kanałów „const”.
Aby dowiedzieć się więcej o klasie ikon, zobacz dokumentację trzepotania. Aby dowiedzieć się więcej o widżecie ikony, zobacz dokumentację trzepotania.
Możesz także dodać przyciski na końcu linii. W trzepotaniu przyciski te nazywane są „Działania”.
Warunki początek I KONIEC wyrażaj znaczenie czytania, niezależnie od zainteresowanego języka. Kiedy pracujesz w języku czytając od lewej do prawej, na przykład angielski, początek oznacza w lewo I KONIEC oznacza w prawo. W języku, który czyta od prawej do lewej, podobnie jak arabski, termin początek oznacza w prawo, I KONIEC oznacza w lewo.
Aby dowiedzieć się więcej o odwróceniu interfejsu użytkownika, zapoznaj się z instrukcjami projektowania materiałów dotyczących dwukierunkowości.
Dodaj działania
Jest wystarczająco dużo miejsca na dwa inne elementy ikonButton.
Dodaj je do instancji AppBar po tytule:
// TODO: Dodaj przyciski końcowe (102) Działania: [iconButton (ikona: const ikona (ikony.Wyszukaj, semanticLabel: „Search”), ontpresd: () < print('Search button'); >, ), IconButton (ikona: const icon (ikony.Tune, SemanticLabel: „Filter”,), onPresd: () < print('Filter button'); >, ),],
Nagraj projekt. Twój ekran główny powinien powstać w następujący sposób:
Aplikacja ma teraz przycisk na początku linii, tytuł i dwie akcje po prawej stronie. Pasek aplikacji ma również efektpodniesienie ze względu na lekki odcień wskazujący, że jest on na innym poziomie niż treść.
W klasie ikony pole Semanticlabel to powszechny sposób na dodanie informacji o dostępności do trzepotania. Jest to system bardzo zbliżony do funkcji treści Androida i funkcji UIACCESILIBILE na iOS dostępność . Znajdziesz to na wielu kursach.
Informacje zawarte w tym polu umożliwiają dostarczanie informacji o czytnikach ekranu na temat roli tego przycisku.
Jeśli widżet nie ma pola semanticlabel :, możesz go zamknąć w widżecie Semantyka. Aby dowiedzieć się więcej o widżecie semantyki, zobacz dokumentację trzepotania.
5. Dodaj arkusz w siatce
Teraz, gdy nasza aplikacja jest nieco bardziej ustrukturyzowana, zorganizujmy jej treść, umieszczając je w plikach.
karty są niezależnymi elementami, które wyświetlają treść i działania związane z danym tematem. Oferują elastyczny sposób prezentacji podobnej treści w formie kolekcji.
Aby dowiedzieć się więcej, zobacz artykuł poświęcony plikom w instrukcjach projektowania materiałów.
Aby dowiedzieć się więcej o widżecie karty (arkusz), zapoznaj się z artykułem na temat tworzenia układów w Flutter.
Dodaj widżet Gridview
Zacznijmy od dodania arkusza pod górnym paskiem aplikacji. Obecnie widżet Karta (Arkusz) nie zawiera wystarczających informacji, aby wyraźnie ustawić się. Dlatego zamkniemy go w widżecie Gridview.
Wymień środek w korpusie elementu rusztowania na widżet Gridview:
// TODO: Dodaj widok siatki (102) Ciało: Gridview.Count (Crossaxiscount: 2, Padding: Const Edgeinsts.Wszystkie (16.0), Childasectratio: 8.0/9.0, // TODO: Zbuduj siatkę kart (102) Dzieci: [card ()],),),
Przeanalizujmy ten kod. Widżet rozrywki wywołuje hrabstwo producenta (), ponieważ liczba wyświetlanych elementów można policzyć i nie jest nieskończona. Ale potrzebuje dodatkowych informacji, aby zdefiniować swój układ.
Zmienna CotaSaxiscount: Wskazuje liczbę elementów na linię. Chcemy uzyskać dwie kolumny.
L ‘Oś poprzeczna w trzepcie odpowiada osi, której nie przewijamy. Poczucie przewijania jest nazywane Oś główna. Jeśli używasz przewijania pionowego, podobnie jak domyślny przypadek z Gridview, oś poprzewka jest pozioma.
Aby dowiedzieć się więcej, zobacz stronę poświęconą tworzeniu układów.
Pole wyściółki: definiuje wolną przestrzeń po czterech stronach widżetu Gridview. Oczywiście, margines ten nie jest widoczny w wyniku elementu lub pod nim, ponieważ na chwilę nie umieszczono żadnego siatki dziecięcej.
Pole Childasecto: identyfikuje rozmiar elementów w postaci proporcji (szerokość wysokości).
Domyślnie Gridview tworzy bloki identycznych rozmiarów.
Mamy arkusz, ale jest pusty. Dodaj widżety dzieci do tego arkusza.
Umieść zawartość
Arkusze muszą zawierać obszary dla obrazu, tytuł i tekst wtórny.
Zaktualizuj dzieci z widżetu Gridview:
// todo: zbuduj siatkę kart (102) Dzieci: [karta (clipbehavior: klip.Antyialia, dziecko: kolumna (krzyżaksysysolizacja: Kotsaksysysolizacja.Start, dzieci: [aspektRatio (aspektRatio: 18.01.11.0, dziecko: obraz.Aktywa („Aktywa/diament.png '),), wyściółka (wyściółka: const edgeinsts.Fromltrb (16.0, 12.0, 16.0, 8.0), Dziecko: kolumna (krzyżaksysysolizacja: Kotsaksysysolizacja.Start, Dzieci: [tekst („tytuł”), const sizexbox (wysokość: 8.0), Text („tekst drugorzędny”),],),),],),)]],
Ten kod dodaje widżet kolumny (kolumna), który pozwala na pionowo mieć widżety dzieci.
Parametr krzyżowo -ospałego: pole określa wartość krzyżowską.Rozpocznij, co oznacza „wyrównanie tekstu po„ uruchomieniu linii ”„ strona ”.
Widżet Aspectratio definiuje proporcje wyświetlonego obrazu, niezależnie od rodzaju dostarczonego obrazu.
Element Wyściółka definiuje margines tekstu.
Dwa widżety Tekst Jeden powyżej drugiego jest umieszczony i oddzielony osiem pustych punktów przestrzeni (Siasedbox)). Tworzymy inny element Kolumna Aby dać im margines wewnętrzny.
Nagraj projekt.
W tym przeglądzie widać, że arkusz jest ustawiony na marginesie, jego narożniki są zaokrąglone i projektuje cień (reprezentujący jego wysokość). Cała forma nazywa się „kontenerem” w systemie projektowania materiału (nie należy mylić z klasą widżetu o nazwie Container).
Oprócz pojemnika wszystkie elementy arkuszy są opcjonalne w materiale. Możesz dodać tekst nagłówka, naklejkę lub awatar, tekst napisów, separatory, a nawet pryszcze i ikony.
Aby dowiedzieć się więcej o treści arkuszy, zapoznaj się z tym artykułem w instrukcjach projektowania materiałów.
Arkusze są zazwyczaj wyświetlane w kolekcji z innymi arkuszami. Ułóż je w postaci kolekcji w siatce.
6. Utwórz zbiór plików
Kiedy na ekranie jest obecnych kilku arkuszy, są one zgrupowane w jednej lub więcej kolekcji. Pliki kolekcji to koplan: mają one taką samą wysokość w spoczynku (to znaczy, kiedy nie zostaną wybrane lub poruszone, czego nie zrobimy tutaj).
Utwórz zbiór plików
Na razie nasz arkusz znajduje się w polu dla dzieci: Gridview Grid. Prowadzi to do dużej ilości zagnieżdżonego kodu, który może być trudny do odczytania. Przekształćmy tę część kodu w funkcję, która pozwala wygenerować tyle pustych arkuszy, ile to konieczne i zwrócić listę plików.
Utwórz funkcję prywatną powyżej funkcji build () (pamiętaj, że funkcje rozpoczynające się od podważającej linii to prywatne interfejsy API):
// TODO: Zrób zbiór kart (102) _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'), ], ), ), ], ), ); >, ); Karty powrotne; >
Przypisz pliki generowane w polu dziecięcym widżetu Gridview. nie zapomnij Wymień wszystkie elementy zawarte w widżecie Gridview na ten nowy kod ::
// TODO: Dodaj widok siatki (102) Ciało: Gridview.Count (Crossaxiscount: 2, Padding: Const Edgeinsts.Wszystkie (16.0), Childasectratio: 8.0/9.0, Dzieci: _BuildGridCards (10) // zamień),
Nagraj projekt.
Karty są obecne, ale na razie nic nie wyświetlają. Nadszedł czas na dodanie danych produktu.
Dodaj dane produktu
Aplikacja zawiera niektóre produkty z obrazami, nazwami i cenami. Dodaj to do widżetów już obecnych w pliku
Potem w domu.DART, zaimportuj nowy pakiet i niektóre pliki dostarczone dla modelu danych:
Pakiet importu: trzepot/materiał.Dart '; Pakiet importu: INTL/INTL.Dart '; Model/produkt importu.Dart '; Import „Model/Products_Repository.Dart ';
Na koniec zmodyfikuj _buildGridCards (), aby pobrać informacje o produkcie i używać tych danych w plikach:
// TODO: Zrób zbiór kart (102) // Zastąp całą listę metod _buildGridCards (kontekst BuildContext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Motyw końcowy Temedata = motyw.z (kontekstu); Końcowy formatter formattera = numberFormat.Prostecurrent (lokalne: lokale.Localof (kontekst).ToString ()); Produkty zwrotne.Mapa ((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, ), ], ), ), ), ], ), ); >)).Notować (); >
ZAUWAŻONY : Poczekaj przed uruchomieniem kompilacji i wykonania. Pozostaje modyfikacja do wykonania.
Aby sformatować tekst, używamy danych motywu Temedata z wartości BuildContext aktualny.
Aby dowiedzieć się więcej o formatowaniu tekstu, zapoznaj się z artykułem na temat typografii w instrukcjach projektowania materiałów. Aby dowiedzieć się więcej o formatowaniu z motywu, kontynuuj po tym warsztatach programowania z MDC-103: Zastosowanie tematów projektowania materiału (kolor, kształty, wysokość i typ).
Modyfikuj także funkcję build (), aby przesyłać wartość BuildContext na _BuildGridCards () przed uruchomieniem kompilacji:
// TODO: Dodaj widok siatki (102) Ciało: Gridview.Count (Crossaxiscount: 2, Padding: Const Edgeinsts.Wszystkie (16.0), Childasectratio: 8.0/9.0, dzieci: _BuildGridCards (kontekst) // Zmień kod),
Uruchom ponownie gorącą aplikację.
Możesz zauważyć, że nie dodajemy pionowej przestrzeni między plikami. Ponieważ mają cztery marginesy przy górnej i dolnej.
Nagraj projekt.
Wyświetlane dane są wyświetlane, ale obrazy są otoczone niepotrzebną przestrzenią. Domyślnie obrazy są rysowane z polem Boxfit zdefiniowane .Skaledown (w tym przypadku). Zastąpić tę wartość .FitWidth, aby mogła powiększyć i usunąć niepotrzebną przestrzeń.
Dodaj pole do dopasowania: jak wartość Boxfit.FitWidth:
// todo: dostosuj rozmiar pudełka (102) dopasowanie: boxfit.FitWidth,
Nasze produkty są teraz doskonale wyświetlane w aplikacji.
7. Gratulacje !
Nasza aplikacja oferuje podstawową operację umożliwiającą użytkownikowi przejście z ekranu połączenia do ekranu głównego, na którym wyświetlane są produkty. Kilka wierszy kodu wystarczyło, aby dodać wyższy pasek aplikacji (z tytułem i trzema przyciskami) i plików (aby przedstawić treść naszej aplikacji). Uzyskany ekran główny jest prosty i funkcjonalny i ma podstawową strukturę i treść użyteczną.
Wykończona wersja aplikacji MDC-102 jest dostępna w oddziale 103-starter_and_102 .
Możesz porównać swoją wersję na stronie z zastosowaniem tej gałęzi.
Następujące kroki
Z paskiem aplikacji, arkuszem, polem tekstowym i przyciskiem znajdującym się u góry strony, użyliśmy teraz czterech głównych elementów biblioteki Flutter. Aby dowiedzieć się więcej, zobacz katalog komponentów materialnych.
Nawet jeśli nasza aplikacja działa idealnie, nie odzwierciedla tożsamości marki ani określonego punktu widzenia. W warsztatach MDC-103: Korzystanie z motywów projektowania materiału (kolor, kształty, wysokość i typ) spersonalizujemy styl tych komponentów, aby wyrazić nowoczesną i dynamiczną markę.
Realizacja tego warsztatu programowania poprosiła mnie o czas i rozsądne wysiłki
Kompletnie się zgadzam
Żaden nie zgadza się ani nie zgadzam
W ogóle nie zgadzam się
Chcę nadal używać komponentów materialnych
Kompletnie się zgadzam
Żaden nie zgadza się ani nie zgadzam
W ogóle nie zgadzam się
O ile nie wskazano inaczej, zawartość tej strony podlega licencji Creative Commons Cassment 4.0, a próbki kodu podlegają licencji Apache 2.0. Aby uzyskać więcej informacji, zobacz reguły witryny programistów Google. Java jest zarejestrowanym znakiem towarowym Oracle i/lub jej spółek stowarzyszonych.