Paigutuste murdmine ridades ja veergudes lehvikus

Kui olete juba 5 minutit Flutteri kohta lugenud, peate olema komistanud vidinatele. Ja kõige populaarsem fakt “Flutteris on peaaegu kõik vidin”.

Jah, kõik.

Ma määratlen vidinad kasutajaliidese määratlevate komponentide või plokkidena. AppBar on vidin, sellel olev tekst on vidin, stiil, mida te tekstile rakendate, on vidin, isegi teksti joondamist võiks nimetada vidinaks. Flutteri puhul on vidin kõik, mis on vaade või aitab selle vaate omadusele kaasa.

Saan vidinate kohta edasi minna, kuid lihtsustamiseks on siin soovitatav vidinate loend, mida peate teadma rakenduse Flutter loomiseks. Kiire ülevaate saamiseks vt allpool.

Keskendumine ridadele ja veergudele

Funktsioonis Flutter saate jagada peaaegu 90% paigutuse kujundustest ridadeks ja veergudeks. Mõnikord peate kasutama muid vidinaid, näiteks korstnat, ruudustikku jne, kuid baastasemelt nõuate mõnes kasutajaliideseplokis ridu ja veerge.

Nii et read ja veerud on…

Kui on elemente, mis on paigutatud kõrvuti või horisontaalselt teise elemendi vasakule / paremale, vajate ridu.

Kui on elemente, mis on paigutatud üksteise järel või vertikaalselt ülevalt / alt teise elemendi külge, vajate veerge.

Päris lihtne, eks?

Selle artikli jaoks peaksite teadma ka järgmist:
Konteinerid: kui olete pärit veebiarenduse taustast või teil on algteadmisi HTML-i kohta, kõlavad konteinerid dividele üsna tuttavalt.
Korstnad: kui on vaateid, mis kattuvad teiste vaadetega, kasutage korstnaid.

Ehitame mõne kasutajaliidese

Aeg on sukelduda koodi ja ehitada paar üsna populaarset paigutuskomponenti ja vaadata, kuidas read ja veerud siia sobivad. Esimese kujunduse puhul kordame WhatsApp Chats Screen loendiüksust. Midagi sarnast alloleval pildil.

Paigutuse jaotus nr 1

Nii palju elemente või vaateid me näeme? Profiili pilti. Kasutajanimi. Kasutaja viimane teade. Viimase teate aeg. Ja lugemata sõnumite arv.

Võimaldab seda kõike konteinerisse mässida ja sellel on kolm lasterühma: vasakpoolsed, kesksed ja parempoolsed, üksteise järel horisontaalselt.

leftSection sisaldab profiilipilti.
middleSectioni all on kasutajanime all viimane teade.
rightSectionil on lugemataMessageCount allpool ajatemplit.

Okei. Kas see oli raske?
Võib-olla alguses, kuid kui olete ridu ja veerge riputanud, saate loomulikult jaotada oma peas paigutused.

Koodide sisestamise aeg

Erinevalt enamikust teistest algaja taseme õpetustest püüan oma koodi alati jagada erinevateks klassideks ja vidinateks. See muudab koodi superloetavaks.

main.dart

tühine main () => runApp (uus MyApp ());

klass MyApp laiendab StatelessWidget {
  // See vidin on teie rakenduse juur.
  @ ületamine
  Vidina loomine (BuildContext kontekst) {
    tagastama MaterialApp (
      avaleht: uus ChatItemScreen (), // helistades chat_screen_item.dart
    );
  }
}

Algajate näpunäide: ärge unustage importida klasse, mida kasutate. Näiteks impordib main.dart chat_screen_item.dart, millel on meie ChatItemScreen klass.

chat_item_screen.dart

klassi ChatItemScreen laiendab StatelessWidgetit {
  @ ületamine
  Vidina loomine (BuildContext kontekst) {
    tagasta uus telling (
      appBar: uus AppBar (
        pealkiri: uus tekst ("Vestluse üksus"),
        backgroundColor: Colors.lightGreen,
      ),
      keha: uus ChatItem (), // helistades chat_item.dart
    );
  }
}

See oli lihtsalt teie alustamiseks, nii et te ei komistaks oma põhilisteks alustamiseks. Nüüd liigume põhikoodi juurde. Meie ChatItem klass tagastab konteineri vidina, millel on Row laps. Sellel Row lapsel on kolm uut vasakpoolset, keskmist ja parempoolset vidinat, mida me varsti ehitame.

chat_item.dart

klassi ChatItem laiendab StatelessWidgetit {

  final leftSection = uus konteiner ();
  final middleSection = uus konteiner ();
  final rightSection = uus konteiner ();

  @ ületamine
  Vidina loomine (BuildContext kontekst) {
    tagasta uus telling (
    kere: uus konteiner (
      laps: uus rida (
        lapsed:  [
          leftSection,
          middleSection,
          parempoolne sektsioon
        ],
      ),
    ),
  );

  }

}

Vasak sektsioon

Vasakpoolses osas vajame CircleAvatari ja selle jaoks on ka kena väike vidin.

final leftSection = uus konteiner (
  laps: uus CircleAvatar (
    backgroundImage: uus NetworkImage (URL),
    backgroundColor: Colors.lightGreen,
    raadius: 24,0,
  ),
);

Keskmine sektsioon

Nüüd loome middleSection Containeri sees kahest tekstividinast veeru, mis hoiab kasutajanime ja lastMessage'i sisu.

final middleSection = uus konteiner (
  laps: uus veerg (
    lapsed:  [
      uus tekst ("nimi"),
      uus tekst ("Tere, mis saab?"),
    ],
  ),
);

See teeb küll vidinate üksteise järel paigutamise, kuid tundub tõesti kole. Aeg lisada natuke ilustamist.

final middleSection = uus laiendatud (
  laps: uus konteiner (
    polster: uus EdgeInsets.only (vasakul: 8,0),
    laps: uus veerg (
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      lapsed:  [
        uus tekst ("nimi",
          stiil: uus TextStyle (
              värv: värvid.must,
              fontWeight: FontWeight.w600,
              fontSize: 16.0,
          ),),
        uus tekst ("Tere, mis saab?", stiil:
          uus tekstistiil (värv: Colors.grey),),
      ],
    ),
  ),
);
  • Laiendatud: kuna see jaotis soovib kogu saadaolevat vaba ruumi, mässime kogu laiendatud vidinasse kogu konteineri. Ilma selleta näeb paigutus välja selline -
  • Polsterdus: rohkem ruumi hingamiseks, häda.
  • TextStyle: annab tekstile stiili, näiteks värvid, fontSize jne. Sama palju nagu CSS, neetud.
  • Nüüd oskan selgitada ristregulatsiooni ja mainAxisAligmenti, kuid ma ei saa seda paremini seletada kui see video. Seega soovitan teil õppida parimatelt. (Kontrollige kella 2: 00–7: 30, et saada lihtsalt kiire ülevaade teema kohta, milles oleme)

Parempoolne osa

Oleme peaaegu valmis. Lihtsalt on vaja ehitada veel üks kahe vidina veerg. Laste vidinatest saab seekord ajatempli tekstvidin ja loenduse jaoks veel üks pisike CircleAvatar.

lõplik rightSection = uus konteiner (
  laps: uus veerg (
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    lapsed:  [
      uus tekst ("9:50",
          stiil: uus TextStyle (
            värv: Colors.lightGreen,
          fontSize: 12.0),),
      uus CircleAvatar (
        backgroundColor: Colors.lightGreen,
        raadius: 10,0,
        laps: uus tekst ("2",
        stiil: uus TextStyle (värv: Colors.white,
        fontSize: 12.0),),
      )
    ],
  ),
);

Nüüd aja seda ilusat asja. Ja see on valmis.

Kas jaotame teise paigutuse lihtsalt selleks, et veenduda, kas see jääb alles?

Paigutuse jaotus nr 2

Zomati kollektsiooni kaart

Nii et meil on see lihtne kaardipaigutus, kus mõne tekstividina veerg kattub taustpildiga. Hmm .. kas sa ütlesid kattuvat? Kas see tähendab, et me kasutame siin korstnaid?

JAH, saate seda.

Jagage vasakpoolse, keskmise või parema sektsiooni asemel see paigutus jaotisteks backgroundImage ja onTopContent.

@ ületamine
Vidina loomine (BuildContext kontekst) {

  tagastage uus konteiner (
    polster: uus EdgeInsets.all (8.0),
    kõrgus: 250,0,
    laps: uus pinu (
      lapsed:  [
        taustapilt,
        onTopContent
      ],
    ),
  );
}

Taustapilt

Nüüd on taustpildil konteineri taustpilt ja värvifilter, et taust tumedamaks muuta.

final backgroundImage = uus konteiner (
    teenetemärk: uus BoxDecoration (
      pilt: uus DecorationImage (
        colorFilter: uus ColorFilter.mode (
            Värvid.must.võimsus (0,6),
            BlendMode.valgusus),
        pilt: uus NetworkImage (URL),
        sobivad: BoxFit.cover,
      ),
    ),
);

Peamisel sisul

Mida sa arvad? Ridad või veerud?

Said pihta. Coluuuumns.

final onTopContent = uus konteiner (
  kõrgus: 80,0,
  laps: uus veerg (mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.start,
    lapsed:  [
      uus tekst ("Selle nädala trendid",
      stiil: bigHeaderTextStyle),
      uus tekst ("Selle nädala populaarseimad restoranid linnas",
        stiil: descTextStyle),
      uus konteiner (
        kõrgus: 2,0,
        laius: 150,0,
        värv: Colors.redAccent,
      ),
      uus tekst ("30 KOHT",
        stiil: footerTextStyle),
      // uus konteiner ()
    ],
  ),
);

Ärge nüüd üllatage minu kasutatud stiilide üle. Need pole Flutteri vaikeväärtused, ma tean, et teil on vigu. Siin on määratletud kõik zomatikaardi stiilid.

Siit leiate isegi nende paigutuste kogu GitHubi hoidla.

Edaspidi uurin keerulisemaid paigutusi, mida saate juurtasemeni murda. Muidugi, vajate keerukamate paigutuste jaoks rohkem vidinaid, kuid ridadel ja veergudel on selles alati oma roll, nii et on oluline, et saaksite selle endale pähe.

Lugege minu teisi artikleid Flutteri kohta

Lärm on värske ja avastan seda praegu ise. Kui leiate, et minu koodis või lähenemisviisis on midagi valesti, mainige seda kommentaarides, tahaksin seda paremaks muuta.
Kui olete õppinud isegi asja või kaks, siis plaksutage oma käsi nii mitu korda kui võimalik, et oma tuge näidata!
Tere maailm, ma olen Pooja Bhaumik. Loov arendaja ja loogiline kujundaja. Kas leiate mind Linkedinist või jälitate mind GitHubis või jälitate mind Twitteris? Kui see on teie jaoks liiga sotsiaalne, siis kui soovite minuga rääkida, kirjutage lihtsalt e-posti aadressile pbhaumik26@gmail.com.