Google Flutter From Scratch griglie, elenchi e origini dati

Quasi tutte le app mobili non banali oggi hanno probabilmente liste nei suoi layout. Questo perché usare un elenco scorrevole è spesso il modo più semplice per visualizzare un gran numero di oggetti simili su uno schermo piccolo. 

La struttura di Flutter offre diversi widget che è possibile utilizzare in modo efficiente e con codice minimo, creare e visualizzare tali elenchi. In questo tutorial, ti mostrerò come utilizzarli con origini dati sia locali che remote.

1. Visualizzazione di un elenco non scorrevole

Se è necessario visualizzare un numero ridotto di elementi simili e si è sicuri che lo schermo dell'utente sarà in grado di accoglierli tutti contemporaneamente, utilizzando il Colonna widget è la cosa più efficiente da fare.

Per creare un elenco nella tua app Flutter, puoi usare il Elenco classe che offre il linguaggio di programmazione Dart. Dopo aver creato la lista, puoi usarne la Inserisci() metodo per aggiungere qualsiasi numero di elementi ad esso. Il codice seguente mostra come creare un elenco contenente tre RaisedButton widget:

// Crea lista lista myItems = new List (); // Aggiungi i widget di tre pulsanti ad esso myItems.add (nuovo RaisedButton (child: new Text ("Twitter"), onPressed: () )); myItems.add (nuovo RaisedButton (child: new Text ("Facebook"), onPressed: () )); myItems.add (new RaisedButton (child: new Text ("Reddit"), onPressed: () ));

Nota che ogni elemento nella lista ha un vuoto onPressed gestore di eventi associato ad esso perché, senza di esso, l'elemento sarebbe disabilitato.

Ora che la lista è pronta, puoi assegnarla direttamente al bambini proprietà del Colonna widget da visualizzare. In genere, tuttavia, è anche necessario specificare dove posizionare gli elementi della lista sullo schermo. Perché il Colonna widget è un widget flessibile, puoi controllare le posizioni degli oggetti lungo il suo asse principale e trasversali usando il mainAxisAlignment e crossAxisAlignment proprietà. Di default, per il Colonna widget, l'asse principale è l'asse verticale e l'asse trasversale è l'asse orizzontale.

Il codice seguente mostra come allungare i tre pulsanti lungo l'asse orizzontale e posizionarli verticalmente al centro dello schermo:

Colonna colonna = nuova colonna (mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: myItems);

Ecco come sarà la colonna ora:

È importante notare che si verificherà un errore di runtime se a Colonna widget non è in grado di ospitare tutti i suoi figli. Ad esempio, se ne avessi più di una dozzina RaisedButton widget nella tua lista invece di tre, vedresti un messaggio di errore simile al seguente:

2. Visualizzazione di un semplice elenco scorrevole

Per gli elenchi leggermente più grandi, gli elenchi il cui contenuto rischia di traboccare lo schermo, è necessario considerare l'utilizzo di a Visualizzazione elenco widget perché supporta lo scorrimento.

Potresti aver notato che il codice che abbiamo scritto per creare l'elenco nel passaggio precedente era lungo e ripetitivo. Creare una lista più ampia usando lo stesso approccio può essere molto noioso. Un semplice approccio alternativo consiste nell'utilizzare due elenchi: uno contenente i dati e uno contenente i widget.

Ecco come puoi usare il [] operatore per creare rapidamente una lista di dati, che, per ora, contiene solo più stringhe:

Elenco dati = ["Twitter", "Reddit", "YouTube", "Facebook", "Vimeo", "GitHub", "GitLab", "BitBucket", "LinkedIn", "Medio", "Tumblr", "Instagram", " Pinterest"];

Per convertire l'elenco precedente di stringhe in un elenco di RaisedButton widget, puoi usare il carta geografica() e elencare() metodi. Con il carta geografica() metodo, è possibile utilizzare ogni stringa per generare un nuovo RaisedButton widget di. E con il elencare() metodo, è possibile convertire il iterable oggetto restituito dal carta geografica() metodo in un reale Elenco oggetto. Il seguente codice mostra come:

Elenco myWidgets = data.map ((item) return new RaisedButton (child: new Text (item), onPressed: () async String url = "https: // $ item .com"; if (attendi canLaunch (url )) attende lancio (url););). toList ();

Per completezza, il codice sopra mostra anche come creare un file onPressed gestore di eventi che utilizza il canLaunch () e lanciare() metodi offerti dal url_launcher pacchetto per aprire il sito Web selezionato dall'utente nel browser predefinito.

Una volta che la tua lista è pronta, puoi passarla al bambini proprietà del Visualizzazione elenco widget per visualizzarlo.

ListView myList = new ListView (children: myWidgets);

A questo punto, se esegui l'app, dovresti essere in grado di scorrere l'elenco e premere qualsiasi pulsante per avviare il sito Web associato.

3. Creazione di una griglia

Il Visualizzazione elenco widget ti permette di posizionare solo un oggetto sul suo asse trasversale. L'oggetto verrà, per impostazione predefinita, allungato per occupare tutto lo spazio disponibile su quell'asse. Se vuoi maggiore flessibilità, dovresti prendere in considerazione l'utilizzo di a Vista a griglia widget, che consente di specificare il numero di elementi desiderati sull'asse trasversale.

Il seguente codice utilizza il GridView.count () costruttore per creare un Vista a griglia widget che visualizza due elementi per riga:

GridView myGrid = GridView.count (crossAxisCount: 2, children: myWidgets);

Ecco come appare la griglia:

4. Visualizzazione di elenchi di grandi dimensioni

Per gli elenchi di dati che contengono più di una dozzina di elementi, è necessario evitare di generare manualmente elenchi di widget, come nel passaggio precedente. Perché? Perché la creazione di un widget è un'operazione costosa e grandi elenchi di widget possono consumare molta memoria.

Invece, dovresti usare il IndexedWidgetBuilder funzione, che consente di generare widget solo quando l'utente ha bisogno di vederli. Con esso, puoi generare pigramente dei widget mentre l'utente scorre attraverso il tuo Visualizzazione elenco widget di.

È abbastanza improbabile che tu abbia grandi quantità di dati definiti all'interno delle tue app. Di solito, si stanno recuperando tali dati da un server remoto. Pertanto, per darti un esempio realistico, mostrami ora come recuperare 100 domande da Stack Overflow usando l'API Stack Exchange e mostrale su richiesta.

Inizia creando una sottoclasse di StatefulWidget classe, che fungerà da contenitore per il tuo Visualizzazione elenco widget e sostituiscilo createState () metodo.

class VeryLargeListHolder estende StatefulWidget @override State createState () return new MyState (); 

Il Il mio stato la classe menzionata nel codice precedente non esiste ancora, quindi crearla e sovrascriverla costruire() metodo.

classe MyState estende lo stato @override Widget build (contesto BuildContext) // TODO

Quindi, aggiungere un Elenco oggetto come una delle variabili membro della classe. Lo utilizzerai per archiviare le domande scaricate da Stack Overflow. Inoltre, aggiungi l'endpoint dell'API come un'altra variabile.

Elenca le domande; String endpoint = "https://api.stackexchange.com/2.2/questions?" + "pagesize = 100 & order = desc & sort = activity & site = stackoverflow";

A meno che tu non voglia che il tuo utente preme un pulsante per scaricare le domande, ti suggerisco di scaricarle automaticamente quando il widget viene inizializzato. Di conseguenza, ignorare il initState () metodo e effettuare una chiamata a un nuovo metodo asincrono chiamato caricare dati().

@override void initState () super.initState (); caricare dati();  void loadData () async // Altro codice qui

Dentro il caricare dati() metodo, è possibile utilizzare il ottenere() funzione di Dart's http pacchetto per scaricare le domande. L'endpoint dell'API restituisce un documento JSON, che può essere analizzato utilizzando il file json.decode () funzione disponibile in Dart's convertire pacchetto. Il seguente codice mostra come:

String rawData = (attende http.get (endpoint)). Body; Mappa jsonData = json.decode (rawData);

Una volta che il documento JSON è stato convertito in a Carta geografica oggetto, puoi usare il valore associato al suo elementi chiave per inizializzare il domande variabile. La variabile, tuttavia, fa parte dello stato del widget. Pertanto, è necessario assicurarsi di aggiornarlo all'interno del setState () solo metodo. Ecco come:

setState (() questions = jsonData ["items"];);

A questo punto puoi creare un nuovo Visualizzazione elenco widget usando il ListView.builder () costruttore, che si aspetta un IndexedWidgetBuilder funzione e un oggetto conta come argomenti. Per ora, il numero di oggetti non è altro che la dimensione del domande elenco. Di conseguenza, aggiungi il seguente codice all'interno di costruire() metodo del Il mio stato classe:

ListView myList = ListView.builder (itemCount: questions == null? 0: questions.length, itemBuilder: (contesto BuildContext, indice int) // Altro codice qui);

All'interno della funzione builder, tutto ciò che devi fare è creare un piccolo albero di widget per visualizzare vari dettagli su ciascuna domanda scaricata. Flutter di Materiale pacchetto offre un widget molto utile chiamato ListTile, che consente di creare rapidamente un albero di questo tipo rispettando le linee guida di progettazione dei materiali.

Il codice seguente mostra come visualizzare il titolo della domanda e l'autore, utilizzando il comando titolo e sottotitolo proprietà del ListTile widget di:

restituisce nuovo ListTile (titolo: Testo (domande [indice] ["titolo"]), sottotitolo: Testo ("Chiesto da $ domande [indice] [" proprietario "] [" display_name "]"));

Infine, creane uno nuovo impalcatura widget, assegnare il Visualizzazione elenco widget al suo corpo proprietà e restituirlo dal costruire() metodo in modo che possa essere usato con a MaterialApp widget di. Facoltativamente, puoi aggiungere un AppBar widget per il impalcatura widget di.

return new Scaffold (appBar: new AppBar (titolo: new Text ("LargeListDemo")), body: myList);

Ecco come apparirà l'app dopo aver scaricato le domande:

Conclusione

Ora sai come lavorare con le liste in un'applicazione Flutter. In questo tutorial, hai imparato non solo come creare elenchi e griglie che supportano grandi fonti di dati, ma anche come rendere interattivo ogni elemento al loro interno. Per saperne di più sulle liste in Flutter, puoi fare riferimento alla documentazione ufficiale.