Punerea metodelor de construire pe o dietă sfaturi și trucuri pentru un cod UI mai curat în Flutter by
În primul rând vreau să clarific că acest articol a fost scris de Liro Krankka și fac doar o traducere autorizată, la sfârșitul articolului vor fi linkurile către articolul original folosit.
Flutterul este cool - Rock it.
Avem API-uri moderne și noi pentru a crea interfețe utilizator (UI) complexe într-o cantitate mică de cod. Reîncărcarea la cald este minunată - putem fi cu 5 ecrane adânci în ierarhia de navigare, putem face câteva modificări în interfața de utilizare, apăsați crtl + S iar IU se va schimba în mai puțin de o secundă fără a pierde statul. Dar când vine vorba de a construi aplicații complexe, ajungem cu o tonă de cod UI.
Cu mai mult cod, vine mai multă responsabilitate de a-l menține lizibil. Păstrarea lizibilității codului facilitează întreținerea pe termen lung. Să vedem câteva sfaturi rapide despre cum să menținem mai ușor de citit codul UI.
Majoritatea proiectelor din aplicațiile noastre se bazează pe conținut plasat orizontal sau vertical. Aceasta înseamnă că de mai multe ori vom folosi widgeturile Coloană sau Rând.
Deoarece plasarea widgeturilor chiar dedesubt sau una lângă alta nu arată întotdeauna bine, vrem să avem margini între ele. Una dintre cele mai evidente modalități de a pune marja între două widget-uri este să înfășurați unul dintre ele într-un widget Padding.
Luați în considerare următorul exemplu:
Avem trei widget-uri de text într-o coloană, acestea având 8,0 de marjă între ele.
Problema: „Widget-uri ascunse”
Problema utilizării widgeturilor Padding peste tot este că acestea încep să ascundă „Logica de afaceri” a codului nostru UI. Creșteți zgomotul vizual adăugând niveluri de indentare și număr de linii.
Ceea ce vrem să facem este să facem ca widgeturile principale să iasă în evidență cât mai mult posibil. Fiecare nivel de indentare suplimentar contează. Dacă putem reduce numărul de linii în același timp, ar fi minunat și.
Soluția: utilizați SizedBoxes
Pentru a combate problema widgeturilor ascunse, putem înlocui toate Paddings cu widget-uri SizedBoxes, folosind SizedBoxes în loc de Paddings ne permite să reducem nivelul de indentare și numărul de linii:
Aici widget-urile SizedBox îndeplinesc aceeași funcție de separare a textului cu o marjă de 8.0.
Aceeași abordare poate fi utilizată și cu widgeturile Row, deoarece rândurile își aranjează widget-urile pentru copii pe orizontală, putem folosi proprietatea de lățime a SizedBox pentru margini orizontale în loc de înălțime.
Apăsările sau atingerile în mod regulat sunt cel mai comun mod prin care utilizatorul poate interacționa cu aplicațiile noastre.
Pentru a permite utilizatorului să „atingă” undeva în aplicația noastră, putem folosi un widget GestureDetector. pentru a-l utiliza trebuie să înfășurați widget-ul original și să specificați callback în proprietatea onTap din constructorul GestureDetector.
Luați în considerare următorul exemplu preluat din aplicația (creată de scriitorul original) din aplicația Kino:
Aplicația inKino are o grilă de postere de filme. când utilizatorul atinge una dintre ele, ar trebui să fie duse la pagina cu detalii despre film.
Problema: amestecarea codului UI cu Logic
Metoda noastră de compilare ar trebui să conțină doar minimul legat de crearea interfeței de utilizare a aplicației noastre. Logica conținută în onTap nu este legată de construirea UI, acest lucru adaugă zgomot inutil la metoda de construire.
În acest caz, putem determina rapid că Navigator.push introduce un nou traseu și acesta este EventDetailsPage, astfel încât atingerea unui element din grilă îi deschide pagina de detalii. Cu toate acestea, dacă este implicat apelul onTap, acest lucru ar putea necesita mai multă citire pentru a înțelege metoda de construire.
Soluția: extrageți logica unei metode private
Această problemă poate fi rezolvată prin extragerea apelului din onTap într-un bine numit metoda privată. În acest caz, creăm o metodă numită _openEventDetails:
E mai bine asa.
Deoarece apelul onTap a fost extras într-o metodă bine denumită, nu trebuie să citim întregul cod. acum este ușor de înțeles ce se întâmplă când este apelat apelul onTap, doar citind numele metodei.
Acum reducem numărul de linii din metoda noastră de construcție prețioasă și ne concentrăm doar pe citirea codului UI.