Flutter ListView ja ScrollPhysics: Yksityiskohtainen ilme

ListView-widgetin ja sen ominaisuuksien tutkiminen syvyydessä

Kirjoitin hetki sitten artikkelin ListView- ja GridView-käytön perusteista Flutterissa. Tämä artikkeli on tarkoitettu yksityiskohtaisemmaksi tutkimukseksi ListView-luokassa, ScrollPhysicsissä ja yleisen widgetin parannuksina ja optimointeina.

ListView in Flutter on lineaarinen luettelo vieritettävistä kohteista. Voimme käyttää sitä luettelon vierittämiseen tai toistuvien kohteiden luettelon luomiseen.

ListView-tyyppien tutkiminen

Aloitamme tarkastelemalla ListView-tyyppejä ja tarkastelemme myöhemmin muita ominaisuuksia ja siistit muutokset siihen.

Katsotaanpa olemassa olevia ListView-tyyppejä:

  1. Listanäkymä
  2. ListView.builder
  3. ListView.separated
  4. ListView.custom

Tutkitaan näitä tyyppejä yksi kerrallaan:

Listanäkymä

Tämä on ListView-luokan oletusrakentaja. ListView ottaa vain luettelon lapsista ja tekee siitä vieritettävän.

Oletuskonstruktorilla rakennettu luettelo

Koodin yleinen muoto on:

Listanäkymä(
  lapset:  [
    ItemOne (),
    ItemTwo (),
    ItemThree (),
  ],
),

Tätä tulisi yleensä käyttää pienen määrän lasten kanssa, koska luettelo rakentaa myös luettelossa näkymättömät elementit ja suuri määrä elementtejä voi tehdä siitä tehottoman.

ListView.builder ()

Rakentaja () rakentaa toistuvan luettelon kohteista. Rakentajalla on kaksi pääparametria: itemCount luettelon kohteiden lukumäärälle ja itemBuilder jokaiselle luettelon kohteelle.

Lista, joka on rakennettu rakentaja () -konstruktorilla

Koodin yleinen muoto on:

ListView.builder (
  itemCount: itemCount,
  itemBuilder: (konteksti, sijainti) {
    return listItem ();
  },
),

Listakohteet on rakennettu laiskasti, mikä tarkoittaa, että vain tietty määrä luettelokohteita rakennetaan ja kun käyttäjä vierittää eteenpäin, aikaisemmat tuhoutuvat.

Hyvä temppu: Koska elementit ladataan laiskasti ja vain tarvittava määrä elementtejä ladataan, emme oikeastaan ​​tarvitse itemCount-pakollista parametria ja luettelo voi olla rajaton.

ListView.builder (
  itemBuilder: (konteksti, sijainti) {
    paluukortti (
      lapsi: pehmuste (
        täyte: const EdgeInsets.all (16.0),
        lapsi: Teksti (position.toString (), tyyli: TextStyle (fontSize: 22.0),),
      ),
    );
  },
),
Luettelonäkymä ilman itemCount-parametria

ListView.separated ()

Erotetussa () konstruktorissa luomme luettelon ja voimme määrittää erottimen kunkin kohteen välillä.

ListView, joka on rakennettu käyttämällä ListView.separated () -konstruktoria

Pohjimmiltaan rakennamme kaksi toisiinsa kudottua luetteloa: yhden pääluettelona ja toisen erotteluluettelona.

Huomaa, että aikaisemmassa konstruktorissa käsiteltyä ääretöntä lukumäärää ei voida käyttää tässä ja tämä rakentaja pakottaa itemCountin.

Tämän tyypin koodi on seuraava:

ListView.separated (
      itemBuilder: (konteksti, sijainti) {
        palauta ListItem ();
      },
      separatorBuilder: (konteksti, sijainti) {
        return SeparatorItem ();
      },
      itemCount: itemCount,
),

Tämän tyyppinen luettelo antaa sinun määrittää dynaamisesti erottimet, saada erityyppisiä erottimia erityyppisille kohteille, lisätä tai poistaa erottimia tarvittaessa jne.

Tätä toteutusta voidaan käyttää myös muun tyyppisten elementtien (esimerkiksi mainosten) lisäämiseen helposti ja ilman mitään muutoksia luettelon keskellä olevaan pääluetteloon.

Esimerkki näyttää mainoksen, kun sijainti on jaollinen 4: llä

Huomautus: Erottimen luettelon pituus on 1 pienempi kuin alkioluettelo, koska erotinta ei ole viimeisen elementin jälkeen.

ListView.custom ()

Mukautettu () -rakentaja, kuten nimensä osoittaa, antaa sinun rakentaa luettelonäkymiä mukautetuilla toiminnoilla luettelon lasten rakentamiseen. Tätä varten vaadittava pääparametri on SliverChildDelegate, joka rakentaa kohteet. SliverChildDelegates-tyypit ovat

  1. SliverChildListDelegate
  2. SliverChildBuilderDelegate

SliverChildListDelegate hyväksyy suoran luettelon lapsista, kun taas SliverChildBuiderDelegate hyväksyy IndexedWidgetBuilder (käyttämämme rakennustoiminto).

Voit joko käyttää tai alaklassia näitä omien edustajien rakentamiseen.

ListView.builder on pohjimmiltaan ListView.custom SliverChildBuilderDelegaten kanssa.

ListView-oletuskonstruktori toimii kuten ListView.custom SliverChildListDelegaten kanssa.

Nyt kun olemme valmistuneet ListView-tyyppien kanssa, katsotaanpa ScrollPhysics-ohjelmaa.

ScrollPhysicsin tutkiminen

Vieritystavan hallitsemiseksi asettamme fysiikkaparametrin ListView-konstruktoriin. Erityisiä fysiikan tyyppejä ovat:

NeverScrollableScrollPhysics

NeverScrollableScrollPhysics tekee luettelosta vierittämättömän. Käytä tätä poistaaksesi ListView-vierityksen kokonaan pois käytöstä.

BouncingScrollPhysics

BouncingScrollPhysics palaa takaisin luetteloon, kun luettelo päättyy. Samanlaista vaikutusta käytetään iOS: ssä.

ClampingScrollPhysics

Tämä on Androidissa käytetty oletusvieritysfysiikka. Lista pysähtyy lopussa ja antaa sen osoittavan efektin.

FixedExtentScrollPhysics

Tämä on hiukan erilainen kuin muut tässä luettelossa siinä mielessä, että se toimii vain FixedExtendScrollControllers ja niitä käyttävien luetteloiden kanssa. Esimerkiksi otamme ListWheelScrollView, joka tekee pyörämäisen luettelon.

FixedExtentScrollPhysics vierittää vain kohteita minkä tahansa välivaiheen sijaan.

Tämän esimerkin koodi on uskomattoman yksinkertainen:

KorjattuExtentScrollController
    uusi FixedExtentScrollController ();
ListWheelScrollView (
  ohjain: fixExtentScrollController,
  fysiikka: FixedExtentScrollPhysics (),
  lapset: kuukauttaOfTheYear.map ((kuukausi) {
    paluukortti (
        lapsi: Rivi (
      lapset:  [
        laajennettu (
            lapsi: pehmuste (
          pehmuste: const EdgeInsets.all (8.0),
          lapsi: Teksti (
            kuukausi,
            tyyli: TextStyle (fontSize: 18.0),
          ),
        )),
      ],
    ));
  }).listata(),
  itemExtent: 60.0,
),

Muutama vielä tiedettävä asia

Kuinka pitää tuhotut elementit elävinä luettelossa?

Flutter tarjoaa KeepAlive () -widgetin, joka pitää kohteen hengissä, joka muuten olisi tuhottu. Luettelossa elementit kääritään oletusarvoisesti AutomaticKeepAlive-widgettiin.

AutomaticKeepAlives voidaan poistaa käytöstä asettamalla addAutomaticKeepAlives-kenttä väärään. Tämä on hyödyllinen tapauksissa, joissa elementtejä ei tarvitse pitää hengissä tai KeepAliven mukautettuun käyttöönottoon.

Miksi ListView-tilassa on tilaa luettelon ja ulkoisen widgetin välillä?

Oletusarvoisesti ListView sisältää pehmusteen sen ja ulkoisen widgetin väliin. Poistamiseksi aseta pehmuste asetukseksi EdgeInsets.all (0.0).

Se on tämä artikkeli! Toivottavasti nautit siitä ja jätät muutaman taputuksen, jos teit. Seuraa minua saadaksesi lisää Flutter-artikkeleita ja kommentoidaksesi palautetta, joka sinulla voi olla tästä artikkelista.

Jotkut muista artikkeleistani