Kodakondsuseta vidinate loomine

Flutteriga alustades on üks esimesi asju, mida peate tundma õppima, kodakondsuseta vidinad. Salvestasime sarja, mis hõlmab kodakondsuseta vidinaid, riiklikke vidinaid, päritud vidinaid ja võtmeid.

Järgnevas videos tutvustan, mis on Flutteri vidin ja kuidas kasutada StatelessWidgetsi rakenduses Flutter:

Neile, kes eelistavad artikleid lugeda videote vaatamise asemel, selgitatakse selles postituses, millised on Flutteri vidinad, kuidas need liidesteks muutuvad ja kuidas koostada kodakondsuseta vidinatega kasutajaliides.

1. osa - Koerarakenduse tegemine kodakondsuseta vidinate abil

Asjade kiireks hoidmiseks alustan siin põhirakendusest. See sisaldab tellingute vidinat, AppBari vidinat ja paari tekstividinat, mis kuvavad teavet minu kollase Labradori, Rocky kohta.

Vidinad on Flutteri rakenduse peamised ehitusplokid. Igaüks neist on kasutajaliidese aspekti muutumatu deklaratsioon ja need võivad võtta paljusid ülesandeid.

Näiteks on olemas:

  • struktuursed vidinad - nagu nupp või menüü
  • stiililised vidinad, mis levitavad fonti või värviskeemi
  • paigutusega seotud vidinad - nagu polster
  • ja paljud teised

Samuti saate olemasolevatest vidinatest uusi vidinaid koostada, nii et kombinatsioonid on lõputud. Las ma näitan sulle, mida ma mõtlen.

Ütle, et tahan oma koera nime taha värvi.

Saan seda teha, mähkides teksti vidina sisse DecoratedBoxiga.

Ja nüüd on minu tekstividinal taustvärv.

Võib-olla tahaksin teksti ümber polsterdada.

Saan selle saavutada polsterdusvidina lisamisega. Ma määratlen 8 loogilist pikslit polsterduse Rocky nime ümber.

Ja nüüd on mul polsterdatud.

Seda vidinate kokkupanemise protsessi kutsume “kompositsiooniks”. Koostan oma liidest, ühendades lihtsaid vidinaid, millest igaüks tegeleb ühe konkreetse tööga: polsterdab asju, DecoratedBox kaunistab kasti jne.

Ütleme nüüd, et lähen loomade varjupaika ja kohtan paari kollast laborit, kus ma ei saaks elada. Saan lisada vidina vidina veergude veeru ja lisada nende nimed.

Nende vahele tühja ruumi lisamiseks kasutan vidinat nimega SizedBox, mille tulemuseks on järgmine:

Kuid teate, mul on nendes kolmes nimekastis palju korduvat koodi (mida nimetatakse ka katlakiviks). Kas poleks tore, kui saaksin teha oma vidina, mis nimeks saaks ja minu eest üksikasju käsitleks?

Noh, ma suudan.

Ma teen StatelessWidget'i ja kutsun seda DogName. Kodakondsuseta vidin on lastest koosnev vidin (seetõttu sisaldab see meetodit build ()) ega sisalda muutlikku olekut, mida selle jälgimiseks vaja on. Kui ütlen muutumatut olekut, pean silmas kõiki omadusi, mis aja jooksul muutuvad. Näiteks tekstiväli, mis sisaldab stringi, mida kasutaja värskendab, või andmevoog, mis värskendab saabumiste / lahkumiste kuva.

Selles vidinas pole seda ühtegi. See vajab lihtsalt nime stringi, mis ei muutu, nii et StatelessWidget sobib ideaalselt. Ma võin selle keelpilli isegi lõplikuks teha.

Saan stringi konstrukatori kaudu täpsustada ja kuna kõik selle omadused on lõplikud, võin selle tähistada kui konstruktorit.

Nüüd pean lihtsalt määratlema ehitamismeetodi samade vidinate abil, alles nüüd kuvab vidin Tekst stringi vidina nime atribuudist.

Kasutan seda vidinat algse koodi lihtsustamiseks.

Nagu näete, on tulemuseks sama UI, kuid tänu StatelessWidget ja Flutteri kompositsiooni kasutamisele on kood tihedam.

2. osa - vidinapuud ja elemendipuud

See on väike näide StatelessWidget'iga komponeerimise toimimisest. Sel hetkel võite endalt küsida: “Ma näen, kuidas need ehitamismeetodid toimivad, aga millal neid kutsutakse?” Alustame kõigest ühe vidinaga DogName.

Me kipume mõtlema rakendustele, mis on Flutteriga loodud vidinate puuna, ja see pole halb asi. Kuid nagu ma alguses mainisin, on vidinad tõesti lihtsalt rakenduse kasutajaliidese osade konfiguratsioonid. Need on joonised. Millised need konfiguratsioonid on? Elemendid. Element on vidin, mis on tehtud reaalseks ja ekraanile kinnitatud. Elementide puu tähistab seda, mida seadmel igal ajahetkel tegelikult kuvatakse.

Igal vidinaklassil on nii vastav elemendiklass kui ka esinemisjuhu loomise meetod.

StatelessWidget loob näiteks StatelessElement.

Kui vidin on puu külge kinnitatud, kutsub Flutter meetodit createElement (). Flutter küsib vidinalt elemendi ja hüppab selle elemendi elemendi puule, viidates tagasi selle loonud vidinale.

Seejärel küsib StatefulElement küsimust „Huvitav, kas mul on lapsi?“ Ja kutsub üles vidina ehitamise () meetodit.

Selles rakenduses on seda mitu. Need vidinad loovad siis oma vastavad elemendid.

Ja need paigaldatakse ka elemendipuu külge.

Nii et rakendusel on nüüd kaks puud: üks, mis tähistab seda, mida ekraanil tegelikult on (elemendid), ja teine, mis hoiab jooniseid, millest need on tehtud (vidinad).

Nüüd võiksite küsida, mis alustab elementide ehitamise ja loomise protsessi, mis nii-öelda kogu asja ära käivitab. Las ma näitan sulle midagi, mida te pole võib-olla juba alguses märganud ...

DogApp-klass, mis esindab kogu rakendust, on ise StatelessWidget.

Ma ütlesin sulle, et vidinad saavad teha peaaegu kõike, eks? Kui vaatate main (), mis on rakenduse sisenemispunkt, näete, et see kutsub üles runApp () meetodit ja see on lähtepunkt. RunApp () meetod võtab vidina ja ühendab selle rakenduse juurelemendiks, mille kõrguse ja laiuse piirangud vastavad ekraani suurusele.

Seejärel liigub Flutter läbi kõigi vidinapuus kasutatavate ehitamismeetodite (), luues vidinad ja kasutades neid elementide valmistamiseks, kuni kõik on ehitatud, ekraanile kinnitatud ja valmis laotamiseks ning renderdamiseks.

Kuidas kuvatakse kolm väikest kasti, mis sisaldavad kollaste laborite nimesid.

See on sissejuhatus StatelessWidgetsiga komponeerimisele ja liidese loomisele. Üks asi, mida ma ei maininud, on see, kuidas värskendada või uuesti luua liides, kui andmed muutuvad. Põhjus on selles, et StatelessWidgets ei tee seda. Nad on kodakondsuseta, nii et nad ei saa andmeid aja jooksul jälgida ega iseseisvalt uuesti üles ehitada.

Õnneks on Flutteril ka StatefulWidgetid, millest räägime teile selle sarja järgmises osas.

Lisateavet Flutteri ja kõigi selle paljude vidinate kohta leiate veebisaidilt flutter.io.

Siit saate vaadata ka sarja teisi episoode või proovida Flutteri kooditabelit.