Share
Aproape orice aplicație mobilă non-trivială de astăzi este probabil să aibă liste în layout-urile sale. Asta pentru că folosirea unei liste derulante este adesea cea mai simplă modalitate de a afișa un număr mare de articole similare pe un mic ecran.
Cadrul Flutter oferă mai multe widget-uri pe care le puteți utiliza eficient și cu un cod minim, creați și afișați astfel de liste. În acest tutorial, vă vom arăta cum să le utilizați atât cu surse de date locale, cât și de la distanță.
Dacă trebuie să afișați un număr mic de articole similare și sunteți sigur că ecranul utilizatorului va putea să le găzduiască pe toate în același timp, utilizând Coloană widget-ul este cel mai eficient lucru de făcut.
Pentru a crea o listă în aplicația Flutter, puteți utiliza funcția Listă clasa pe care le oferă limba de programare Dart. După crearea listei, puteți să o utilizați adăuga() metodă de adăugare a oricăror elemente la el. Următorul cod vă arată cum să creați o listă care să conțină trei RaisedButton widget-uri:
// Crearea listei de listămyItems = lista nouă (); // Adaugă widget-uri cu trei butoane la el myItems.add (noul RaisedButton (copil: text nou ("Twitter"), onPressed: () )); myItems.add (noul RaisedButton (copil: text nou ("Facebook"), onPressed: () )); myItems.add (noul RaisedButton (copil: text nou ("Reddit"), onPressed: () ));
Rețineți că fiecare articol din listă are o imagine goală onPressed gestionarea evenimentului asociată cu aceasta deoarece, fără aceasta, elementul ar fi dezactivat.
Acum că lista este gata, puteți să o asignați direct copii proprietate a Coloană widget pentru a fi afișat. De obicei, însă, veți dori, de asemenea, să specificați unde ar trebui să fie plasate elementele de listă pe ecran. Deoarece Coloană widgetul este un widget flexibil, puteți controla pozițiile elementelor de-a lungul axei lor principale și a axei încrucișate folosind mainAxisAlignment și crossAxisAlignment proprietăți. În mod implicit, pentru Coloană widget, axa principală este axa verticală, iar axa transversală este axa orizontală.
Următorul cod vă arată cum să întindeți cele trei butoane pe axa orizontală și plasați-le în centrul ecranului pe verticală:
Coloană Coloană = coloană nouă (mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, copii: myItems);
Iată cum va arăta acum coloana:
Este important să rețineți că veți întâlni o eroare de execuție dacă a Coloană widgetul nu este în măsură să găzduiască toți copiii săi. De exemplu, dacă ați avut mai mult de o duzină RaisedButton widget-uri din lista dvs. în loc de trei, ați vedea un mesaj de eroare care arată astfel:
Pentru liste puțin mai mari, liste ale căror conținut este probabil să depășească ecranul, trebuie să luați în considerare utilizarea a ListView widget deoarece susține defilare.
Este posibil să fi observat că codul pe care l-am scris pentru a crea lista din pasul anterior a fost atât lung și repetitiv. Crearea unei liste mai mari utilizând aceeași abordare poate fi foarte obositoare. O abordare alternativă ușoară este folosirea în schimb a două liste: una care conține datele și una care conține widget-urile.
Iată cum puteți utiliza [] operator pentru a crea rapid o listă de date, care, deocamdată, conține numai mai multe șiruri de caractere:
Listădate = ["Twitter", "Reddit", "YouTube", "Facebook", "Vimeo", "GitHub", "GitLab", "BitBucket", "LinkedIn", "Medium", "Tumblr" pinterest "];
Pentru a converti lista de șiruri de mai sus într - o listă de RaisedButton widget-uri, aveți posibilitatea să utilizați Hartă() și a lista() metode. Cu Hartă() , puteți utiliza fiecare șir pentru a genera un nou RaisedButton widget. Și cu a lista() metoda, puteți converti Iterable obiect returnat de către Hartă() metoda într-o realitate Listă obiect. Următorul cod vă arată cum:
ListămyWidgets = data.map ((element) returnează RaisedButton nou (copil: text nou (item), onPressed: () async string url = "https: )) așteaptă lansarea (url););). toList ();
Din motive de exhaustivitate, codul de mai sus vă arată cum să creați un onPressed gestionarea evenimentului care utilizează canLaunch () și lansa() metodele oferite de url_launcher pachet pentru a deschide site-ul web selectat de utilizator în browser-ul implicit.
Odată ce lista dvs. este gata, puteți să o trimiteți la copii proprietate a ListView widget pentru ao afișa.
ListView myList = noul ListView (copii: myWidgets);
În acest moment, dacă rulați aplicația, ar trebui să puteți naviga prin listă și să apăsați orice buton pentru a lansa site-ul asociat.
ListView widget vă permite să plasați un singur element pe axa sa transversală. Elementul va fi, în mod implicit, întins pentru a ocupa tot spațiul disponibil pe acea axă. Dacă doriți mai multă flexibilitate, vă recomandăm să folosiți a GridView widget, care vă permite să specificați câte elemente doriți pe axa transversală.
Următorul cod utilizează GridView.count () constructor pentru a crea un GridView widget care afișează două elemente pe rând:
GridView myGrid = GridView.count (CrossAxisCount: 2, copii: myWidgets);
Iată ce arată grila:
Pentru listele de date care conțin mai mult de câteva duzini de elemente, ar trebui să evitați generarea manuală a listelor widget-uri, așa cum ați făcut într-un pas anterior. De ce? Deoarece crearea unui widget este o operație costisitoare, și liste mari de widget-uri pot consuma o mulțime de memorie.
În schimb, ar trebui să utilizați IndexedWidgetBuilder , care vă permite să generați widget-uri numai atunci când utilizatorul trebuie să le vadă. Cu aceasta, puteți genera leneș widget-uri în timp ce utilizatorul navighează prin intermediul dvs. ListView widget.
Este puțin probabil ca veți avea cantități mari de date definite chiar în interiorul aplicațiilor. De obicei, ați prelua astfel de date de la un server de la distanță. Prin urmare, pentru a vă oferi un exemplu realist, permiteți-mi să vă arăt acum cum să preluați 100 de întrebări din Stack Overflow folosind API-ul Stack Exchange și să le afișați la cerere.
Începeți prin a crea o subclasă a StatefulWidget clasa, care va acționa ca un container pentru dvs. ListView widget și suprascrie-i createState () metodă.
clasa VeryLargeListHolder extinde StatefulWidget @override StatecreateState () returnează noua MyState ();
Statul meu clasa menționată în codul de mai sus nu există încă, așa că creați-o și înlocuiți-o construi() metodă.
clasa MyState extinde statulbuild @override Widget (Context BuildContext) // TODO
Apoi, adăugați o Listă obiect ca una dintre variabilele membre ale clasei. Veți fi folosit pentru a stoca întrebările pe care le-ați descărcat din Stack Overflow. În plus, adăugați punctul final al API ca o altă variabilă.
Listați întrebări; String endpoint = "https://api.stackexchange.com/2.2/questions?" + "pagini = 100 & comanda = desc & sortare = activitate & site = stackoverflow";
Cu excepția cazului în care doriți ca utilizatorul dvs. să apese un buton pentru a descărca întrebările, vă sugerăm să le descărcați automat când widgetul este inițializat. În consecință, suprascrieți initState () și apelați la o nouă metodă asincronă numită incarca date().
@override void initState () super.initState (); incarca date(); void loadData () async // Mai mult cod aici
În interiorul incarca date() , puteți utiliza funcția obține() funcția lui Dart http pachet pentru a descărca întrebările. Punctul final al API returnează un document JSON, pe care îl puteți parsa folosind json.decode () funcția disponibilă în Darts convertit pachet. Următorul cod vă arată cum:
String rawData = (așteaptă http.get (punct final)). Harta jsonData = json.decode (rawData);
Odată ce documentul JSON a fost transformat în a Hartă obiect, puteți utiliza valoarea asociată acestuia articole cheie pentru inițializarea întrebări variabil. Variabila, totuși, face parte din statutul widgetului. Prin urmare, trebuie să vă asigurați că îl actualizați în interiorul setState () doar metoda. Iată cum:
setState (() questions = jsonData ["elemente"];);
În acest moment puteți crea un nou ListView widget folosind ListView.builder () constructor, care așteaptă o IndexedWidgetBuilder funcția și un element se numără ca argumente. Pentru moment, numărul de elemente nu este altceva decât dimensiunea întrebări listă. În consecință, adăugați următorul cod în interiorul construi() metodă a Statul meu clasă:
ListView myList = ListView.builder (itemCount: questions == null? 0: questions.length, itemBuilder: (Context BuildContext, index int) // Mai mult cod aici);
În interiorul funcției constructor, tot ce trebuie să faceți este să creați un arbore widget mic pentru a afișa detalii detaliate despre fiecare întrebare pe care ați descărcat-o. lui flutter material pachetul oferă un widget foarte util, numit ListTile, care vă permite să creați rapid un astfel de copac în timp ce respectați regulamentul Material Design.
Următorul cod vă arată cum să afișați titlul și autorul întrebării, utilizând titlu și subtitlu proprietățile ListTile widget:
Accentsconagua
întoarceți noul ListTile (titlu: Text (întrebări [index] ["titlu"]), subtitlu: Text ("Întrebat de $ [questions];În cele din urmă, creați un nou Schelă widget, atribuiți ListView widget-ul său corp proprietății și returnați-o de la construi() astfel încât să poată fi utilizat cu un MaterialApp widget. Opțional, puteți adăuga un AppBar widget la Schelă widget.
întoarceți scheletul nou (appBar: nou AppBar (titlu: text nou ("LargeListDemo")), corp: myList);Iată ce va arăta aplicația după ce a descărcat întrebările:
Acum știți cum să lucrați cu liste într-o aplicație Flutter. În acest tutorial, ați învățat nu numai cum să creați liste și rețele care să suporte surse mari de date, ci și cum să faceți fiecare element în ele interactiv. Pentru a afla mai multe despre listele din Flutter, vă puteți referi la documentația oficială.
