Share
Nesten alle ikke-trivielle mobilappene i dag er sannsynligvis å ha lister i oppsettene. Det er fordi det å bruke en rullbar liste ofte er den enkleste måten å vise et stort antall lignende gjenstander på en liten skjerm.
The Flutter-rammeverket tilbyr flere widgets du kan bruke til effektivt, og med minimal kode, opprette og vise slike lister. I denne veiledningen viser jeg deg hvordan du bruker dem med både lokale og eksterne datakilder.
Hvis du trenger å vise et lite antall lignende elementer, og du er sikker på at brukerens skjerm vil kunne imøtekomme dem alle samtidig, ved å bruke Kolonne Widget er den mest effektive tingen å gjøre.
Hvis du vil opprette en liste i Flutter-appen, kan du bruke Liste klasse som Dart programmeringsspråket tilbyr. Etter å ha opprettet listen, kan du bruke dens Legg til() metode for å legge til et hvilket som helst antall elementer til den. Følgende kode viser hvordan du oppretter en liste som inneholder tre RaisedButton widgets:
// Opprett liste ListemyItems = ny liste (); // Legg til tre knapp widgets til den myItems.add (new RaisedButton (barn: ny tekst ("Twitter"), påPressed: () )); myItems.add (new RaisedButton (barn: ny tekst ("Facebook"), onPressed: () )); myItems.add (new RaisedButton (barn: ny tekst ("Reddit"), onPressed: () ));
Merk at hvert element i listen har en tom onPressed Event Handler assosiert med det fordi, uten det, var elementet deaktivert.
Nå som listen er klar, kan du direkte tildele den til barn eiendom av Kolonne widget som skal vises. Vanligvis vil du imidlertid også spesifisere hvor listeelementene skal plasseres på skjermen. Fordi det Kolonne Widget er en flex-widget, du kan kontrollere posisjonene til elementene langs hovedakselen og krysse akse ved hjelp av mainAxisAlignment og crossAxisAlignment eiendommer. Som standard, for Kolonne widget, hovedaksen er den vertikale aksen, og kryssaksen er den horisontale akse.
Følgende kode viser hvordan du strekker de tre knappene over den horisontale aksen og plasserer dem midt på skjermen vertikalt:
Kolonne kolonne = Ny kolonne (mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, barn: myItems);
Her ser kolonnen nå ut:
Det er viktig å merke seg at du vil støte på en kjøretidsfeil hvis a Kolonne Widget kan ikke imøtekomme alle sine barn. For eksempel, hvis du hadde over et dusin RaisedButton widgets i listen i stedet for tre, vil du se en feilmelding som ser slik ut:
For litt større lister, lister der innholdet sannsynligvis vil overfylle skjermen, må du vurdere å bruke en Listevisning widget fordi den støtter rulling.
Du har kanskje lagt merke til at koden vi skrev for å lage listen i forrige trinn var både lang og repeterende. Å lage en større liste med samme tilnærming kan være veldig kjedelig. En enkel alternativ tilnærming er å bruke to lister i stedet: en som inneholder dataene, og en som inneholder widgets.
Slik kan du bruke [] operatør for raskt å lage en dataliste, som for øyeblikket bare inneholder flere strenge:
Listedata = ["Twitter", "Reddit", "YouTube", "Facebook", "Vimeo", "GitHub", "GitLab", "BitBucket", "LinkedIn", "Medium", "Tumblr", "Instagram" pinte~~POS=TRUNC "];
For å konvertere listen over strenger over til en liste over RaisedButton widgets, kan du bruke kart() og ramse opp() metoder. Med kart() metode, kan du bruke hver streng til å generere en ny RaisedButton widget. Og med ramse opp() Metode, du kan konvertere Iterable objekt returnert av kart() metode til en faktisk Liste gjenstand. Følgende kode viser deg hvordan:
ListemyWidgets = data.map ((item) return new RaisedButton (barn: ny tekst (element), onPressed: () async String url = "https: // $ item .com" )) venter lansering (url););). toList ();
For fullstendig skyld viser koden ovenfor hvordan du lager en onPressed hendelseshåndterer som bruker canLaunch () og lansering () metoder som tilbys av url_launcher pakke for å åpne nettstedet som brukeren har valgt i standard nettleser.
Når listen er klar, kan du sende den til barn eiendom av Listevisning widget for å vise den.
ListView myList = ny ListView (barn: myWidgets);
På dette tidspunktet, hvis du kjører appen, bør du kunne bla gjennom listen og trykke på en hvilken som helst knapp for å starte den tilknyttede nettsiden.
De Listevisning widget lar deg plassere bare ett element på sin kryss akse. Elementet vil som standard bli strukket for å innta all ledig plass på den aksen. Hvis du vil ha mer fleksibilitet, bør du vurdere å bruke en Rutenett visning widget i stedet, som lar deg angi hvor mange elementer du vil ha på kryssaksen.
Følgende kode bruker GridView.count () konstruktør for å lage en Rutenett visning widget som viser to elementer per rad:
GridView myGrid = GridView.count (crossAxisCount: 2, barn: myWidgets);
Her ser nettverket ut:
For datalister som inneholder mer enn noen få dusin elementer, bør du unngå å generere widgetlister manuelt, slik du gjorde i et tidligere trinn. Hvorfor? Fordi å lage en widget er en dyr operasjon, og store lister over widgets kan forbruke mye minne.
I stedet bør du bruke IndexedWidgetBuilder funksjon, som lar deg generere widgets bare når brukeren trenger å se dem. Med det kan du lazily lage widgets som brukeren ruller gjennom din Listevisning widget.
Det er ganske lite sannsynlig at du skal ha store mengder data definert rett innenfor appene dine. Vanligvis vil du hente slike data fra en ekstern server. For å gi deg et realistisk eksempel, la meg nå vise deg hvordan du kan hente 100 spørsmål fra Stack Overflow ved hjelp av Stack Exchange API og vise dem på etterspørsel.
Start med å lage en underklasse av StatefulWidget klassen, som vil fungere som en beholder for din Listevisning widget og overstyr den createState () metode.
klasse VeryLargeListHolder utvider StatefulWidget @override StatecreateState () returner nytt MyState ();
De MyState Klassen nevnt i koden ovenfor eksisterer ikke ennå, så opprett den og overstyr den bygge() metode.
klassen MyState utvider staten@override Widget build (BuildContext kontekst) // TODO
Deretter legger du til en Liste objekt som en av medlemsvariablene i klassen. Du bruker det til å lagre spørsmålene du lastet ned fra Stack Overflow. I tillegg legger du til endringspunktet for API-en som en annen variabel.
Liste spørsmål; String endpoint = "https://api.stackexchange.com/2.2/questions?" + "pageize = 100 & order = desc & sort = aktivitet & site = stackoverflow";
Med mindre du vil at brukeren skal trykke på en knapp for å laste ned spørsmålene, foreslår jeg at du laster dem ned automatisk når widgeten initialiseres. Følgelig overstyrer initState () metode og ringe til en ny asynkron metode kalt loadData ().
@override void initState () super.initState (); loadData (); void loadData () async // Mer kode her
Inne i loadData () metode, kan du bruke få() funksjon av Dart's http pakke for å laste ned spørsmålene. API-endepunktet returnerer et JSON-dokument, som du kan analysere ved å bruke json.decode () funksjon tilgjengelig i Dart's konvertere pakke. Følgende kode viser deg hvordan:
String rawData = (avventer http.get (endepunkt)). Kropp; Kart jsonData = json.decode (rawData);
Når JSON-dokumentet er konvertert til a Kart objekt, kan du bruke verdien som er knyttet til dens elementer nøkkel til å initialisere spørsmål variabel. Variabelen er imidlertid en del av widgetens tilstand. Derfor må du sørge for at du oppdaterer den inne i setState () bare metode. Dette er hvordan:
setState (() questions = jsonData ["items"];);
På dette tidspunktet kan du opprette en ny Listevisning widget ved hjelp av ListView.builder () konstruktør, som forventer en IndexedWidgetBuilder funksjon og et element teller som sine argumenter. For nå er antall teller ingenting annet enn størrelsen på spørsmål liste. Følgelig legger du til følgende kode inne i bygge() metode av MyState klasse:
ListView myList = ListView.builder (itemCount: questions == null? 0: questions.length, itemBuilder: (BuildContext kontekst, int indeks) // Mer kode her);
I builderfunksjonen er alt du trenger å gjøre, å lage et lite widgettre for å vise forskjellige detaljer om hvert spørsmål du lastet ned. Flutter er materiale pakken tilbyr en veldig nyttig widget kalt ListTile, som gjør at du raskt kan lage et slikt tre samtidig som du følger retningslinjene for Materialdesign.
Følgende kode viser hvordan du viser spørsmålet tittel og forfatter ved hjelp av tittel og undertittel egenskaper av ListTile widget:
Accentsconagua
returnere ny ListTile (tittel: Tekst (spørsmål [index] ["title"]), tekst: Tekst ("Asked by $ questions [index] [" owner "] [" display_name "]"));Til slutt, opprett en ny stillas~~POS=TRUNC widget, tilordne Listevisning widget til sin kropp eiendom, og returner den fra bygge() metode slik at den kan brukes med a MaterialApp widget. Eventuelt kan du legge til en appbar widget til stillas~~POS=TRUNC widget.
returner ny stillas (appBar: ny AppBar (tittel: ny tekst ("LargeListDemo")), kropp: myList);Slik ser appen ut etter at den har lastet ned spørsmålene:
Du vet nå hvordan du skal arbeide med lister i et Flutter-program. I denne opplæringen lærte du ikke bare hvordan du oppretter lister og grid som støtter store datakilder, men også hvordan du lager hvert element inni dem interaktivt. For å lære mer om lister i Flutter, kan du se den offisielle dokumentasjonen.
