MDC-102: struttura e layout del materiale

Il design del materiale offre formati di navigazione che garantiscono una grande facilità d’uso. Uno dei componenti più visibili è la barra dell’applicazione superiore.

Crea un account Developer Google Play

Informa le tue informazioni personali, l’indirizzo di tua scelta e la tua password.

Accetta le condizioni generali di vendita (GTC).

Aggiungi una bella foto di te stesso.

Crea un account Developer Google Play

La procedura per la creazione di un account sviluppatore di Google Play è molto più semplice rispetto a Apple.

Connettiti con il tuo indirizzo Gmail.

Accetta il GTC.

Regola le commissioni di registrazione: un singolo pagamento di 25 euro per pubblicare tutte le domande di tua scelta !

Informare le informazioni relative al tuo account: nome sviluppatore, indirizzo e -mail e numero di telefono.

Questo ha risposto alla tua domanda ?

Grazie per i commenti c’era un problema per inviare i tuoi commenti. per favore riprova più tardi.

Ultimo aggiornamento del 9 novembre 2021

Articoli associati

• Crea un’applicazione su Google Play Console
• Genera il certificato Android P12
• Esporta il file APK o AAB
• Pubblica un’applicazione Android
• Pubblica un’app Android fuori dal Play Store
• Pubblica su Google Play Store

MDC-102: struttura e layout del materiale

I componenti del materiale (MDC) aiutano gli sviluppatori a implementare la progettazione di materiali. Progettato da un team di ingegneri e specialisti dell’esperienza utente presso Google, MDC offre dozzine di componenti di interfaccia utente eleganti e funzionali. È disponibile per Android, iOS, il web e il flutter.Materiale.Io/sviluppo.

Nel Workshop di programmazione MDC-101, hai utilizzato due elementi di componenti materiali per creare una pagina di connessione: campi di testo e pulsanti che comprendono animazioni “inchiostro”. Su queste basi, arricchiamo la nostra applicazione aggiungendo navigazione, struttura e dati.

Obiettivi del seminario

In questo seminario di programmazione, creerai una schermata principale per Santuario, Una domanda di e-commerce per la vendita di abbigliamento e articoli per la casa. Questa schermata conterrà:

• Una barra di applicazione più alta
• Un elenco di prodotti sotto forma di una griglia

Si prega di notare che questo seminario di programmazione è stato sostituito dal materiale 3, ad eccezione degli screenshot. Tuttavia trasmettono le stesse informazioni.

Questo seminario di programmazione è il secondo dei quattro seminari che ti aiuteranno a creare un’applicazione per un prodotto chiamato Sanctuary. Ti consigliamo di seguire tutti i seminari di programmazione in ordine, per avanzare a poco a poco alle attività. Troverai i tuoi seminari di programmazione qui:

• MDC-101 Flutter: principi di base dei componenti del materiale
• Flutter MDC-103: uso di temi del design del materiale (colore, forme, elevazione e tipo)
• Flutter MDC-104: componenti di progettazione del materiale avanzato

Componenti e sottosistemi di materiale di flutter materiale in questo seminario di programmazione

• Superiore
• Griglie
• Carte

In questo seminario di programmazione, utilizzerai i componenti predefiniti forniti da materiale flutter. Imparerai a personalizzarli nella sezione MDC-103: Utilizzo di temi del design del materiale (colore, forme, elevazione e tipo).

Come valuteresti il ​​tuo livello di esperienza nello sviluppo con Flutter ?

2. Configurare l’ambiente di sviluppo di Flutter

Per questo seminario, hai bisogno di due software: The Flutter SDK e un editore.

È possibile eseguire il seminario di programmazione su uno dei seguenti dispositivi:

• Un dispositivo iOS Android o fisico collegato al tuo computer e impostato in modalità sviluppatore.
• Il simulatore iOS (strumenti Xcode da installare).
• L’emulatore Android (che deve essere configurato in Android Studio).
• Un browser (Chrome è richiesto per il debug).
• Come desktop Windows, Linux o MacOS. È necessario sviluppare la tua applicazione sulla piattaforma in cui prevedi di distribuirla. Ad esempio, se si desidera sviluppare un’applicazione desktop di Windows, è necessario farlo su Windows per accedere alla catena di compilazione appropriata. Scopri anche i requisiti specifici per i sistemi operativi, che sono dettagliati sui documenti.Flutter.Dev/desktop.

3. Scarica l’app di partenza per il workshop di programmazione

Hai già seguito il seminario MDC-101 ?

Se hai finito il workshop di programmazione MDC-101, il codice dovrebbe essere pronto per iniziare questo seminario. Vai alla fase successiva: Aggiungi una barra dell’applicazione più alta.

Inizi da zero ?

Scarica l’applicazione di partenza di avvio iniziale

L’applicazione iniziale si trova nel materiale-componente-flutter-codelabs-102-starter_and_101-complete/mdc_100_series .

… o clona il seminario di GitHub

Per clonare questo seminario di programmazione da GitHub, eseguire i seguenti comandi:

Git clone https: // github.Com/materiale-componente/materiale-componente-flutter-codelabs.GIT CD materiale-componente-flutter-codelabs/mdc_100_series GIT Checkout 102-starter_and_101-Complete

Per chiedere aiuto, consulta la sezione di clonazione di GitHub

Scegli il ramo corretto

I seminari di programmazione MDC-101 a 104 si affidano l’uno sull’altro. Quindi, quando si termina il codice per il workshop MDC-102, diventa il codice iniziale del workshop MDC-103. Il codice è diviso in diversi rami, che è possibile visualizzare l’elenco usando questo comando:

GIT Branch -Elenco

Per visualizzare il codice finito, vai alla filiale 103-starter_and_102-Complete .

Apri il progetto ed esegui l’applicazione

1. Apri il progetto nell’editore di tua scelta.
2. Segui le istruzioni relative all’editore che hai scelto. Sono accessibili al paragrafo “Esegui l’app” (eseguire l’applicazione) nella pagina GET> Test Drive (Primi passaggi> Test).

Operazione di successo. La pagina di connessione del santuario dal workshop di programmazione MDC-101 deve essere visualizzata sul dispositivo.

Ora che la schermata di connessione è in atto, aggiungiamo alcuni prodotti all’applicazione.

4. Aggiungi una barra dell’applicazione più alta

Per il momento, se fai clic sul pulsante “Avanti”, la schermata Home viene visualizzata con il messaggio “L’ho fatto!”(Sei riuscito.). Perfetto. Tuttavia, il nostro utente non ha nulla da fare e non sa dove si trova nell’applicazione. Per aiutarti, è tempo di aggiungere la navigazione.

Là navigazione si riferisce a componenti, interazioni, indicatori visivi e architettura di informazioni che consentono agli utenti di navigare in un’applicazione. Ti consente di scoprire contenuti e funzionalità e di eseguire facilmente attività.

Per saperne di più, consultare l’articolo dedicato alla navigazione nelle istruzioni di progettazione del materiale.

Il design del materiale offre formati di navigazione che garantiscono una grande facilità d’uso. Uno dei componenti più visibili è la barra dell’applicazione superiore.

Potresti conoscere questo elemento sotto il nome “barra di navigazione” sotto iOS, o semplicemente “barra dell’applicazione” o “intestazione”.

Per offrire agli utenti un rapido accesso ad altre azioni, aggiungiamo una barra delle applicazioni più elevata.

Aggiungi un widget appbar

A casa.Dart, aggiungi un appbar a “impalcatura”, quindi elimina il const evidenziato:

RETROVER COST SCAFFOLD (// TODO: Aggiungi barra app (102) AppBar: AppBar (// Todo: Aggiungi pulsanti e titolo (102)), 

L’aggiunta delAppbar Nel campo Appbar: le impalcature ci consente di ottenere un layout perfetto e gratuito, lasciando la barra dell’applicazione nella parte superiore della pagina e sotto il corpo.

Impalcatura è un widget importante in materialpps. Fornisce API pratiche per visualizzare tutti i tipi di componenti di questioni attuali, come i pannelli, le barre di notifica “snackbar” e gli elementi del foglio inferiore. Facilita persino il posizionamento di un pulsante di azione galleggiante.

Consultare la documentazione di Flutter per saperne di più su Scaffold.

Registra il progetto. Una volta aggiornato il santuario, fai clic su Prossimo (Seguente) per visualizzare la schermata principale.

L’elemento è ben posizionato, ma manca di un titolo.

Aggiungi un widget di testo

A casa.Dart, aggiungi un titolo alla barra dell’applicazione Appbar:

// todo: aggiungi la barra dell'app (102) AppBar: AppBar (// Todo: Aggiungi pulsanti e titolo (102) Titolo: const Testo ('Shrine'), // TODO: Aggiungi pulsanti finali (102) 

Registra il progetto.

Potresti aver notato variazioni per ogni piattaforma. Il sistema di progettazione del materiale tiene conto del fatto che ogni piattaforma (Android, iOS, Web) è diversa e che le aspettative dell’utente sono diverse. Ad esempio, su iOS, i titoli sono quasi sempre centrati. Questo è il comportamento predefinito fornito da Uikit. Su Android, sono allineati a sinistra. Pertanto, se si utilizza un emulatore o un dispositivo Android, il titolo dovrebbe essere allineato a sinistra. Nel caso di un simulatore o di un dispositivo iOS, deve essere centrato.

Per saperne di più, consultare questo articolo sull’adattamento a diverse piattaforme con progettazione di materiali.

Molte barre dell’applicazione hanno un pulsante accanto al titolo. Aggiungi un’icona del menu alla nostra applicazione.

Aggiungi un pulsante iconbutton all’inizio della linea

Sempre a casa.Dart, Definisci un elemento iconbutton per il campo principale: della barra dell’applicazione Appbar. (Posizionalo davanti al campo del titolo: in conformità con l’inizio dall’inizio alla fine della linea):

 // todo: aggiungi pulsanti e titolo (102) leader: iconbutton (icona: icona const (icone.Menu, semanlabel: 'menu',), supreso: () < print('Menu button'); >, ), 

Registra il progetto.

L’icona del menu (chiamata anche “hamburger”), appare nella posizione desiderata.

La classe Iconbutton è un modo pratico per integrare le icone dei materiali nella tua applicazione. Usa un widget Icona. Flutter ha una collezione completa di icone in classe Icone. Le icone vengono importate automaticamente in base alle mappature del canale “const”.

Per saperne di più sulla lezione di icone, consulta la documentazione di Flutter. Per saperne di più sul widget Icon, consultare la documentazione Flutter.

Puoi anche aggiungere pulsanti alla fine della linea. In flutter, questi pulsanti sono chiamati “azioni”.

Termini inizio E FINE esprimere il significato della lettura, indipendentemente dalla lingua interessata. Quando lavori in una lingua leggendo da sinistra a destra, come l’inglese, inizio significa A sinistra E FINE significa A destra. In una lingua che legge da destra a sinistra, come l’arabo, il termine inizio significa A destra, E FINE significa A sinistra.

Per saperne di più sull’inversione dell’interfaccia utente, consultare le istruzioni di progettazione del materiale sulla bidirezionalità.

Aggiungi azioni

C’è abbastanza spazio per altri due elementi iconbutton.

Aggiungili all’istanza di appbar dopo il titolo:

// Todo: Aggiungi pulsanti finali (102) Azioni: [iconbutton (icona: const icona (icone.Search, SessanTlabel: 'Search',), ONTPRESD: () < print('Search button'); >, ), Iconbutton (icona: icona const (icone.melodia, semanlabel: 'filter',), onpresd: () < print('Filter button'); >, ),], 

Registra il progetto. La tua schermata iniziale dovrebbe sorgere come segue:

L’applicazione ora ha un pulsante all’inizio della riga, un titolo e due azioni a destra. La barra dell’applicazione ha anche un effetto dielevazione a causa di una leggera tonalità che indica che è a un livello diverso da quello del contenuto.

In una lezione di icona, il campo Seminlabel è un modo comune per aggiungere informazioni sull’accessibilità a flutter. È un sistema molto vicino alla formalità di formulazione del contenuto Android e uiacessibility su iOS AccessibilityLelbel . Lo troverai in molti corsi.

Le informazioni contenute in questo campo consentono di fornire informazioni sui lettori di screen sul ruolo di questo pulsante.

Se un widget non ha un campo semantico: puoi incapsularlo in un widget Semantica. Per saperne di più sul widget semantico, consultare la documentazione di Flutter.

5. Aggiungi un foglio in una griglia

Ora che la nostra applicazione è un po ‘più strutturata, organizziamo il suo contenuto posizionandoli nei file.

IL carte sono elementi indipendenti che mostrano il contenuto e le azioni associate a un determinato argomento. Offrono un modo flessibile per presentare contenuti simili sotto forma di una raccolta.

Per saperne di più, consultare l’articolo dedicato ai file nelle istruzioni di progettazione del materiale.

Per saperne di più sul widget della carta (foglio), consultare l’articolo sulla creazione di layout in flutter.

Aggiungi un widget GridView

Cominciamo aggiungendo un foglio sotto la barra dell’applicazione superiore. Attualmente, il widget Carta (Foglio) non contiene informazioni sufficienti per posizionarti visibilmente. Lo incapsuleremo quindi in un widget Vista a griglia.

Sostituire il centro nel corpo dell’elemento di impalcatura con un widget Gridview:

// todo: aggiungi una vista a griglia (102) corpo: gridview.Conteggio (CrossAxiscount: 2, imbottitura: const EdgeInsts.Tutto (16.0), Childspectreao: 8.0/9.0, // todo: costruisci una griglia di carte (102) bambini: [card ()],),), 

Analizziamo questo codice. Il widget Griver chiama il conteggio del produttore (), perché il numero di elementi che mostra può essere conteggiato e non è infinito. Ma ha bisogno di ulteriori informazioni per definire il suo layout.

La variabile crastraxiscount: indica il numero di elementi per riga. Vogliamo ottenere due colonne.

L’Asse trasversale In Flutter corrisponde all’asse che non scorriamo. Il senso di scorrimento si chiama Asse principale. Se si utilizza lo scorrimento verticale, come è il caso predefinito con GridView, l’asse trasversale è orizzontale.

Per saperne di più, vedere la pagina dedicata alla creazione di layout.

Il campo di imbottitura: definisce uno spazio libero sui quattro lati del widget Gridview. Naturalmente, questo margine non è visibile come risultato dell’elemento o sotto di esso, perché per il momento nessun bambino è stato posto accanto a questo elemento.

Il campo Childaspecto: identifica la dimensione degli elementi sotto forma di proporzioni (larghezza in altezza).

Per impostazione predefinita, Gridview crea blocchi di dimensioni identiche.

Abbiamo un foglio, ma è vuoto. Aggiungi i widget per bambini a questo foglio.

Metti il ​​contenuto

I fogli devono includere aree per un’immagine, un titolo e un testo secondario.

Aggiorna i bambini dal widget Gridview:

// todo: costruisci una griglia di carte (102) bambini: [carta (clipbehavior: clip.Antialias, Child: Column (CrossAxisalignment: CrassAxisalignment.Avvia, bambini: [aspectratio (aspectratio: 18.0/11.0, bambino: immagine.Asset ('Asset/Diamond.png '),), imbottitura (imbottitura: const edgeinsts.daltrb (16.0, 12.0, 16.0, 8.0), bambino: colonna (crossaxisalignment: crossaxisalignment.Inizia, bambini: [testo ('titolo'), const -sizebox (altezza: 8.0), text ('text secondario'),],),),],),)], 

Questo codice aggiunge un widget della colonna (colonna) che consente di avere i widget per bambini in verticale.

Il parametro crossaxisalignment: il campo specifica il valore del crossaxisalignment.Inizia, che significa “allineare il testo sul” lato “”.

Il widget Proporzioni definisce le proporzioni dell’immagine visualizzata, indipendentemente dal tipo di immagine fornita.

L’elemento Imbottitura Definisce un margine per il testo.

I due widget Testo uno sopra l’altro è posizionato e separato da otto punti spaziali vuoti (Dimensione). Creiamo un altro elemento Colonna Per dare loro margini interni.

Registra il progetto.

In questa panoramica, puoi vedere che il foglio è posizionato con un margine, i suoi angoli sono arrotondati e proietta un’ombra (che rappresenta la sua elevazione). L’intera forma è chiamata “contenitore” nel sistema di progettazione del materiale (da non confondere con la classe widget chiamata contenitore).

Oltre al contenitore, tutti gli elementi dei fogli sono opzionali nel materiale. È possibile aggiungere un testo dell’intestazione, un adesivo o un avatar, un testo di sottotitoli, separatori e persino brufoli e icone.

Per saperne di più sul contenuto dei fogli, consultare questo articolo nelle istruzioni di progettazione del materiale.

I fogli sono generalmente visualizzati in una collezione con altri fogli. Disporre sotto forma di una collezione in una griglia.

6. Crea una raccolta di file

Quando sono presenti diversi fogli su uno schermo, sono raggruppati in una o più collezioni. I file di una raccolta sono Coplanar: hanno tutti la stessa elevazione a riposo (vale a dire quando non sono selezionati o spostati, cosa che non faremo qui).

Crea una raccolta di file

Per il momento, il nostro foglio è posizionato all’interno del campo per bambini: Gridview Grid. Questo porta a una grande quantità di codice nidificato che può essere difficile da leggere. Trasformiamo questa parte del codice in una funzione che consente di generare il numero di fogli vuoti necessari e di restituire un elenco di file.

Crea una funzione privata sopra la funzione build () (ricorda che le funzioni che iniziano con una linea di sottolineatura sono API private):

// todo: crea una raccolta di carte (102) elenco _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'), ], ), ), ], ), ); >, ); Carte di ritorno; > 

Assegna i file generati nel campo dei bambini del widget Gridview. non dimenticare di Sostituisci tutti gli elementi contenuti nel widget Gridview con questo nuovo codice :::

// todo: aggiungi una vista a griglia (102) corpo: gridview.Conteggio (CrossAxiscount: 2, imbottitura: const EdgeInsts.Tutto (16.0), Childspectreao: 8.0/9.0, bambini: _buildgridcards (10) // Sostituisci), 

Registra il progetto.

Le carte sono presenti, ma non mostrano nulla per il momento. È giunto il momento di aggiungere i dati del prodotto.

Aggiungi i dati del prodotto

L’applicazione contiene alcuni prodotti con immagini, nomi e prezzi. Aggiungi questo ai widget già presenti nel file

Poi a casa.Dart, importare un nuovo pacchetto e alcuni file forniti per un modello di dati:

Pacchetto import ': flutter/materiale.Dart '; Pacchetto import ': intl/intl.Dart '; Modello/prodotto di importazione.Dart '; Import 'Model/Products_Repository.Dart '; 

Infine, modifica _BuildGridCards () per recuperare le informazioni sul prodotto e utilizzare questi dati nei file:

// todo: crea una raccolta di carte (102) // Sostituisci l'intero elenco di metodi _BuildGridCards (contesto BuildContext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > Tema TEEDATA FINALE = TEMA.di (contesto); NumberFormat Finale Format = NumberFormat.SimpleCurrent (locale: locali.Localof (contesto).accordare ()); Return Products.Mappa ((prodotto) < 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, ), ], ), ), ), ], ), ); >).Elencare (); > 

SI ACCORSE : Attendere prima di avviare la compilazione e l’esecuzione. Rimane una modifica da apportare.

Per formattare il testo, utilizziamo i dati del tema Temadata dal valore BuildContext attuale.

Per saperne di più sulla formattazione del testo, consultare l’articolo sulla tipografia nelle istruzioni di progettazione del materiale. Per saperne di più sulla formattazione da un tema, continuare dopo questo seminario di programmazione con MDC-103: uso di temi del design del materiale (colore, forme, elevazione e tipo).

Modifica anche la funzione build () per trasmettere il valore BuildContext at _BuildGridCards () prima di avviare la compilation:

// todo: aggiungi una vista a griglia (102) corpo: gridview.Conteggio (CrossAxiscount: 2, imbottitura: const EdgeInsts.Tutto (16.0), Childspectreao: 8.0/9.0, Children: _BuildGridCards (contesto) // Codice di modifica), 

Riavvia l’applicazione calda.

Potresti notare che non aggiungiamo spazio verticale tra i file. Perché hanno quattro margini in alto e in basso.

Registra il progetto.

Vengono visualizzati i dati prodotti, ma le immagini sono circondate da uno spazio inutile. Per impostazione predefinita, le immagini sono disegnate con il campo Boxfit definito .Scaledown (in questo caso). Sostituire questo valore con .Fitwidth in modo che possa ingrandire e rimuovere lo spazio inutile.

Aggiungi un campo Fit: come il valore Boxfit.Fitwidth:

 // todo: regola la dimensione della scatola (102) adatto: boxfit.fitwidth, 

I nostri prodotti sono ora perfettamente visualizzati nell’applicazione.

7. Congratulazioni !

La nostra applicazione offre operazioni di base che consentono all’utente di passare dalla schermata di connessione a una schermata principale in cui vengono visualizzati i prodotti. Alcune righe di codice erano sufficienti per aggiungere una barra dell’applicazione più alta (con un titolo e tre pulsanti) e file (per presentare il contenuto della nostra applicazione). La schermata principale ottenuta è semplice e funzionale e ha una struttura di base e un contenuto utilizzabile.

La versione completata dell’applicazione MDC-102 è disponibile nella filiale 103-starter_and_102-Complete .

Puoi confrontare la tua versione sulla pagina con l’applicazione di questo ramo.

Seguenti passaggi

Con la barra dell’applicazione, il foglio, il campo di testo e il pulsante situato nella parte superiore della pagina, ora abbiamo utilizzato quattro componenti principali della libreria di flutter materiale. Per saperne di più, vedere il catalogo dei componenti del materiale.

Anche se la nostra applicazione funziona perfettamente, non riflette un’identità del marchio o un punto di vista particolare. Nel Workshop MDC-103: uso di temi del design del materiale (colore, forme, elevazione e tipo), personalizzeremo lo stile di questi componenti per esprimere un marchio moderno e dinamico.

La realizzazione di questo seminario di programmazione mi ha chiesto un tempo e sforzi ragionevoli

Completamente d’accordo

Né concordato, né d’accordo

non è affatto d’accordo

Voglio continuare a utilizzare i componenti del materiale

Completamente d’accordo

Né concordato, né d’accordo

non è affatto d’accordo

Se non diversamente indicato, il contenuto di questa pagina è regolato da una licenza Creative Commons Assegnazione 4.0 e i campioni di codice sono regolati da una licenza Apache 2.0. Per ulteriori informazioni, consultare le regole del sito degli sviluppatori di Google. Java è un marchio registrato di Oracle e/o delle sue società affiliate.