Google Flutter from Scratch Grids, Lists en Data Sources

Bijna elke niet-triviale mobiele app van vandaag heeft waarschijnlijk lijsten in zijn lay-outs. Dat komt omdat het gebruik van een schuifbare lijst vaak de meest eenvoudige manier is om een ​​groot aantal vergelijkbare items op een klein scherm weer te geven. 

Het Flutter-framework biedt verschillende widgets die u efficiënt en met minimale code kunt gebruiken om dergelijke lijsten te maken en weer te geven. In deze zelfstudie laat ik u zien hoe u deze kunt gebruiken met zowel lokale als externe gegevensbronnen.

1. Een niet-schuifbare lijst weergeven

Als u een klein aantal vergelijkbare items wilt weergeven en u zeker bent dat het gebruikersscherm ze allemaal tegelijkertijd kan accommoderen, gebruikt u de Kolom widget is het meest efficiënte wat je kunt doen.

Om een ​​lijst in uw Flutter-app te maken, kunt u de Lijst klasse die de programmeertaal Dart biedt. Nadat u de lijst hebt gemaakt, kunt u de bijbehorende gebruiken toevoegen() methode om een ​​willekeurig aantal items eraan toe te voegen. De volgende code laat zien hoe je een lijst met drie maakt RaisedButton widgets:

// Lijst met lijsten maken myItems = nieuwe lijst (); // Voeg er drie knopwidgets aan toe myItems.add (new RaisedButton (child: new Text ("Twitter"), onPressed: () )); myItems.add (new RaisedButton (child: new Text ("Facebook"), onPressed: () )); myItems.add (new RaisedButton (child: new Text ("Reddit"), onPressed: () ));

Merk op dat elk item in de lijst leeg is onPressed gebeurtenishandler die hieraan is gekoppeld omdat zonder dat het item zou worden uitgeschakeld.

Nu de lijst gereed is, kunt u deze direct toewijzen aan de kinderen eigendom van de Kolom widget wordt weergegeven. Meestal wilt u echter ook aangeven waar de lijstitems op het scherm moeten worden geplaatst. Omdat het Kolom widget is een flexwidget, u kunt de posities van de items langs de hoofdas en dwarsas beheren met behulp van de mainAxisAlignment en crossAxisAlignment eigenschappen. Standaard voor de Kolom widget, de hoofdas de verticale as en de dwarsas de horizontale as.

De volgende code laat zien hoe u de drie knoppen over de horizontale as kunt strekken en deze verticaal in het midden van het scherm plaatst:

Kolom kolom = nieuwe kolom (mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: myItems);

Zo ziet de kolom er nu uit:

Het is belangrijk om op te merken dat er een runtime-fout optreedt als een Kolom widget kan niet al zijn kinderen accommoderen. Bijvoorbeeld als u meer dan een dozijn had RaisedButton widgets in uw lijst in plaats van drie, ziet u een foutmelding die er als volgt uitziet:

2. Weergave van een eenvoudige scrollabellijst

Voor iets grotere lijsten, lijsten waarvan de inhoud waarschijnlijk het scherm zal overstromen, moet u overwegen om a te gebruiken Lijstweergave widget omdat deze het scrollen ondersteunt.

Het is je misschien al opgevallen dat de code die we hebben geschreven om de lijst in de vorige stap te maken zowel lang als repetitief was. Het creëren van een grotere lijst met dezelfde aanpak kan erg vervelend zijn. Een eenvoudige alternatieve benadering is om in plaats daarvan twee lijsten te gebruiken: een met de gegevens en een met de widgets.

Hier ziet u hoe u de kunt gebruiken [] operator om snel een gegevenslijst te maken, die voorlopig slechts meerdere strings bevat:

Lijst data = ["Twitter", "Reddit", "YouTube", "Facebook", "Vimeo", "GitHub", "GitLab", "BitBucket", "LinkedIn", "Medium", "Tumblr", "Instagram", " Pinterest "];

De bovenstaande lijst met tekenreeksen omzetten in een lijst met RaisedButton widgets, je kunt de kaart() en ToList () methoden. Met de kaart() methode, kunt u elke tekenreeks gebruiken om een ​​nieuwe te genereren RaisedButton widget. En met de ToList () methode, kunt u de Iterable object geretourneerd door de kaart() methode in een echte Lijst voorwerp. De volgende code laat zien hoe:

Lijst myWidgets = data.map ((item) return new RaisedButton (child: new Text (item), onPressed: () async String url = "https: // $ item .com"; if (awlaat canLaunch (url )) wachten op starten (url););). toList ();

Voor de volledigheid laat de bovenstaande code je ook zien hoe je een onPressed gebeurtenishandler die de canLaunch () en lancering() methoden aangeboden door de url_launcher pakket om de website te openen die de gebruiker in de standaardbrowser heeft geselecteerd.

Zodra uw lijst gereed is, kunt u deze doorgeven aan de kinderen eigendom van de Lijstweergave widget om het weer te geven.

ListView myList = new ListView (children: myWidgets);

Als u nu de app uitvoert, moet u door de lijst kunnen bladeren en op een willekeurige knop kunnen drukken om de bijbehorende website te openen.

3. Een raster maken

De Lijstweergave widget stelt u in staat om slechts één item op zijn dwarsas te plaatsen. Het item wordt standaard uitgerekt om alle beschikbare ruimte op die as in te nemen. Als u meer flexibiliteit wilt, zou u moeten overwegen om a te gebruiken Rasterweergave widget in plaats daarvan, waarmee je kunt aangeven hoeveel items je wilt op de dwarsas.

De volgende code gebruikt de GridView.count () constructor om een ​​te maken Rasterweergave widget die twee items per rij weergeeft:

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

Dit is hoe het raster eruit ziet:

4. Grote lijsten weergeven

Voor gegevenslijsten die meer dan enkele tientallen items bevatten, moet u voorkomen dat widgetlijsten handmatig worden gegenereerd, zoals u in een eerdere stap hebt gedaan. Waarom? Omdat het maken van een widget een dure bewerking is en grote lijsten met widgets veel geheugen kunnen verbruiken.

Gebruik in plaats daarvan de IndexedWidgetBuilder functie, waarmee u alleen widgets kunt genereren wanneer de gebruiker ze moet zien. Hiermee kun je lui widgets genereren terwijl de gebruiker door je scrollt Lijstweergave widget.

Het is vrij onwaarschijnlijk dat grote hoeveelheden gegevens rechtstreeks in uw apps worden gedefinieerd. Meestal zou u dergelijke gegevens ophalen van een externe server. Daarom, om u een realistisch voorbeeld te geven, laat ik u nu zien hoe u 100 vragen uit Stack Overflow kunt ophalen met de Stack Exchange API en deze op aanvraag kunt weergeven.

Begin met het maken van een subklasse van de StatefulWidget klasse, die zal fungeren als een container voor uw Lijstweergave widget en negeer het createState () methode.

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

De Mijn staat klasse genoemd in de bovenstaande code bestaat nog niet, dus maak het aan en overschrijf het bouwen() methode.

klasse MyState breidt State uit @override Widget-build (contextcontext BuildContext) // TODO

Voeg vervolgens een toe Lijst object als een van de ledvariabelen van de klasse. U zult het gebruiken om de vragen op te slaan die u hebt gedownload van Stack Overflow. Voeg daarnaast het eindpunt van de API toe als een andere variabele.

Lijst vragen; String-eindpunt = "https://api.stackexchange.com/2.2/questions?" + "pageize = 100 & order = desc & sort = activity & site = stackoverloop";

Tenzij u wilt dat uw gebruiker op een knop drukt om de vragen te downloaden, raad ik u aan deze automatisch te downloaden wanneer de widget wordt geïnitialiseerd. Dienovereenkomstig, negeer de initState () methode en bel een nieuwe asynchrone methode genaamd loadData ().

@override void initState () super.initState (); loadData ();  void loadData () async // Meer code hier

Binnen in de loadData () methode, kunt u de krijgen() functie van Dart's http pakket om de vragen te downloaden. Het API-eindpunt retourneert een JSON-document, dat u kunt parseren met behulp van de json.decode () functie beschikbaar in Dart's converteren pakket. De volgende code laat zien hoe:

String rawData = (wacht op http.get (eindpunt)). Body; Map jsonData = json.decode (rawData);

Zodra het JSON-document is geconverteerd naar een Kaart object, kunt u de bijbehorende waarde gebruiken items toets om het te initialiseren vragen variabel. De variabele maakt echter deel uit van de staat van de widget. Daarom moet u ervoor zorgen dat u het in de setstate () methode alleen. Hier is hoe:

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

Op dit punt kunt u een nieuwe maken Lijstweergave widget met behulp van de ListView.builder () constructor, die een verwacht IndexedWidgetBuilder functie en een item tellen als zijn argumenten. Voor nu is het aantal items niets anders dan de grootte van de vragen lijst. Voeg daarom de volgende code toe binnen de bouwen() methode van de Mijn staat klasse:

ListView myList = ListView.builder (itemCount: questions == null? 0: questions.length, itemBuilder: (BuildContext-context, int-index) // Meer code hier);

In de opbouwfunctie hoeft u alleen maar een kleine widgetboom te maken om verschillende details weer te geven over elke vraag die u hebt gedownload. flutter's materiaal pakket biedt een zeer handige widget genaamd ListTile, waarmee je snel zo'n boom kunt maken met inachtneming van de Material Design-richtlijnen.

De volgende code laat zien hoe u de titel en de auteur van de vraag kunt weergeven, met behulp van de titel en subtitel eigenschappen van de ListTile widget:

retourneer nieuwe ListTile (titel: Tekst (vragen [index] ["titel"]), ondertitel: Tekst ("Gevraagd door $ vragen [index] [" eigenaar "] [" display_name "]"));

Maak ten slotte een nieuwe aan Steiger widget, wijs de Lijstweergave widget naar zijn lichaam eigendom en retourneer het van de bouwen() methode zodat het kan worden gebruikt met een MaterialApp widget. Eventueel kunt u een toevoegen AppBar widget voor de Steiger widget.

retourneer nieuwe Scaffold (appBar: nieuwe AppBar (titel: nieuwe tekst ("LargeListDemo")), body: myList);

Zo ziet de app eruit nadat hij de vragen heeft gedownload:

Conclusie

U weet nu hoe u met lijsten in een Flutter-toepassing moet werken. In deze zelfstudie hebt u niet alleen geleerd hoe u lijsten en rasters maakt die grote gegevensbronnen ondersteunen, maar ook hoe u elk item in de interactieve gegevensbron maakt. Voor meer informatie over lijsten in Flutter, kunt u de officiële documentatie raadplegen.