Syvä sukellus PageView-näkymään räpytystilassa (mukautetuilla siirroilla)

PageView-widgetin tutkiminen ja mukautettujen sivusiirtymien luominen

Tämä artikkeli on seitsemäs artikkelisarjasta, joissa tarkastellaan perusteellisesti Flutterin sisäänrakennettuja widgettejä.

  1. ListView / ScrollPhysics
  2. Tekstikentät
  3. FloatingActionButtons
  4. Hero-widget
  5. Muunna widget
  6. Vedettäviä / DragTarget

Tässä artikkelissa tarkastellaan PageView-kuvausta, jonka jälkeen myöhemmin tehdään sille muutama mukautettu tehoste.

HUOMAUTUS: ListView-syväsukellus on tämän artikkelin edeltäjä. Artikkelissa käsiteltyjä elementtejä ei toisteta, koska ne ovat melkein samat. Voit lukea ListView-artikkelin täältä

Sivunäkymien tutkiminen

PageView on widget, joka luo näytöllä vieritettäviä sivuja. Tämä voi olla joko kiinteä luettelo sivuista tai rakennustoiminto, joka rakentaa toistuvia sivuja. PageView toimii samalla tavalla kuin ListView siinä mielessä, että se rakentaa elementtejä.

PageView-tyypit ovat:

  1. Sivunäkymä
  2. PageView.builder
  3. PageView.custom

PageView (oletusrakentaja)

Tämä tyyppi vie kiinteän luettelon lapsista (sivut) ja tekee niistä vieritettäviä.

Sivunäkymä(
  lapset:  [
    Säiliö (
      väri: Colors.pink,
    ),
    Säiliö (
      väri: Colors.cyan,
    ),
    Säiliö (
      väri: Colors.deepPurple,
    ),
  ],
)

Yllä oleva koodi tuottaa seuraavan tuloksen:

PageView.builder

Tämä rakentaja ottaa itemBuilder-toiminnon ja itemCount: n, joka on samanlainen kuin ListView.builder

PageView.builder (
  itemBuilder: (konteksti, sijainti) {
    return _buildPage ();
  },
  itemCount: listItemCount, // Voi olla nolla
)

Kuten ListView.builder, tämä rakentaa lapsia tarpeen mukaan.

Jos itemCount on asetettu nollaksi (ei asetettu), sivujen luettelo voidaan luoda ääretön.

Esimerkiksi tämä koodi:

PageView.builder (
  itemBuilder: (konteksti, sijainti) {
    paluukontti (
      väri: sijainti% 2 == 0? Colors.pink: Colors.cyan,
    );
  },
)

Antaa äärettömän luettelon sivuista, joissa on vuorottelevat vaaleanpunaiset ja syaanivärit:

Huomaa: PageView.custom toimii samalla tavalla kuin ListView.custom (keskusteli aiemmassa syväsukelluksessa), emmekä keskustele siitä täällä.

Suuntautuminen

Kaikentyyppisissä sivunäkymissä voi olla vaaka- tai pystysuunnassa vieritettäviä sivuja.

Sivunäkymä(
  lapset:  [
    // Lisää lapsia tähän
  ],
  scrollDirection: Axis.vertical,
)

Yllä oleva koodi antaa meille:

PageSnapping

Sivun napsauttaminen antaa meille mahdollisuuden pitää sivu väliarvoissa. Tämä tapahtuu sammuttamalla pageSnapping -määritteen. Tässä tapauksessa sivu ei vieri kokonaislukuun ja käyttäytyy kuin normaali ListView.

Sivunäkymä(
  lapset:  [
    // Lisää lapsia tähän
  ],
  pageSnapping: false,
)

ScrollPhysics

PageView-näytöllä voi olla mukautettu vierityskäyttäytyminen samalla tavalla kuin ListViews. Emme toista erilaisia ​​ScrollPhysics-tyyppejä, koska siitä keskustellaan ListView-syväsukelluksessa.

ScrollPhysics voidaan muuttaa fysiikka-parametrilla:

Sivunäkymä(
  lapset:  [
    // Lisää lapsia tähän
  ],
  fysiikka: BouncingScrollPhysics (),
)

Sivun katselun hallinta

Sivun katselua voidaan hallita ohjelmoidusti liittämällä PageController.

// Rakennusmenetelmä ulkopuolella
PageController-ohjain = PageController ();
// Sisäinen rakennusmenetelmä
Sivunäkymä(
  ohjain: ohjain,
  lapset:  [
    // Lisää lapsia
  ],
)

Vierityspaikka, nykyinen sivu jne. Voidaan tarkistaa säätimellä.

Huomaa: controller.currentPage palauttaa kaksinkertaisen arvon. Esimerkiksi, kun sivua siirretään, arvo siirtyy asteittain 1: stä 2: een eikä siirry hetkessä arvoon 2.

Mukautettujen siirtymien lisääminen sivunäkymiin

Keskustelemme muutaman mukautetun siirtymän lisäämisestä sivuille Transform + PageView-sovelluksella. Tässä osassa käytetään Muunnos-widgettiä laajasti, ja suosittelen lukemaan yhtä monista widgetin artikkeleista.

Suosituksini olisivat kirjoittamasi Deep Dive ja WM Leler's Transform -artikkeli.

Siirtymä 1

Asennus

Käytämme ensin perussivua PageView.builder

PageView.builder (
  ohjain: ohjain,
  itemBuilder: (konteksti, sijainti) {
  },
  itemCount: 10,
)

Otetaan nyt 10 tuotetta.

Käytämme PageControlleria ja muuttujaa, jolla on currentPage-arvo.

PageControllerin ja muuttujien määritteleminen:

PageController-ohjain = PageController ();
var currentPageValue = 0,0;

Muuttujan päivittäminen, kun sivunäkymää vieritetään.

controller.addListener (() {
  setState (() {
    currentPageValue = ohjain.sivu;
  });
});

Viimeinkin rakennamme PageView.

Tarkistetaan nyt kolme ehtoa:

  1. Jos sivu on se sivu, josta siirretään
  2. Jos sivu on se sivu, johon siirretään
  3. Jos sivu on sivu pois näytöstä
PageView.builder (
  ohjain: ohjain,
  itemBuilder: (konteksti, sijainti) {
    if (position == currentPageValue.floor ()) {
    } else if (position == currentAnimationValue.floor () + 1) {
      
    } muuta {
      
    }
  },
  itemCount: 10,
)

Nyt palautamme saman sivun, mutta käärittynä Muunnos-widgettiin sivujen muuntamiseksi pyyhkäisemällä sitä.

PageView.builder (
  ohjain: ohjain,
  itemBuilder: (konteksti, sijainti) {
    if (position == currentPageValue.floor ()) {
      paluu muunnos (
        muunnos: Matrix4.identity () .. rotateX (currentPageValue - sijainti),
        lapsi: kontti (
          väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
          lapsi: Center (
            lapsi: Teksti (
              "Sivu",
              tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
            ),
          ),
        ),
      );
    } else if (position == currentPageValue.floor () + 1) {
      paluu muunnos (
        muunnos: Matrix4.identity () .. rotateX (currentPageValue - sijainti),
        lapsi: kontti (
          väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
          lapsi: Center (
            lapsi: Teksti (
              "Sivu",
              tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
            ),
          ),
        ),
      );
    } muuta {
      paluukontti (
        väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
        lapsi: Center (
          lapsi: Teksti (
            "Sivu",
            tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
          ),
        ),
      );
    }
  },
  itemCount: 10,
)

Tässä muuntamme sivun, josta pyyhkäisemään, ja sivun, johon pyyhkäisemään.

currentPageValue.floor () antaa meille sivun vasemmalla ja

currentPageValue.floor () antaa meille oikealla olevan sivun

Tässä esimerkissä kiertämme sivua X-suunnassa, kun sitä pyyhkäisee arvo currentPageValue vähennettynä indeksillä radianteina. Voit vahvistaa vaikutusta kertomalla tämän arvon.

Voimme mukauttaa tätä muunnosta ja muuntamisen kohdistamista antamaan meille monentyyppisiä uusia sivusiirtymiä.

Siirtymä 2

Samanlainen koodirakenne, vain erilaisella muunnoksella:

PageView.builder (
  ohjain: ohjain,
  itemBuilder: (konteksti, sijainti) {
    if (position == currentPageValue.floor ()) {
      paluu muunnos (
        muunnos: Matrix4.identity () .. rotateY (currentPageValue - sijainti) .. rotateZ (currentPageValue - sijainti),
        lapsi: kontti (
          väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
          lapsi: Center (
            lapsi: Teksti (
              "Sivu",
              tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
            ),
          ),
        ),
      );
    } else if (position == currentPageValue.floor () + 1) {
      paluu muunnos (
        muunnos: Matrix4.identity () .. rotateY (currentPageValue - sijainti) .. rotateZ (currentPageValue - sijainti),
        lapsi: kontti (
          väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
          lapsi: Center (
            lapsi: Teksti (
              "Sivu",
              tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
            ),
          ),
        ),
      );
    } muuta {
      paluukontti (
        väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
        lapsi: Center (
          lapsi: Teksti (
            "Sivu",
            tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
          ),
        ),
      );
    }
  },
  itemCount: 10,
)

Tässä pyöritämme sekä Y- että Z-akselia.

Siirtymä 3

Tämä on samanlainen siirtymätyyppi viime kerralla, mutta siihen on lisätty 3D-efekti.

PageView.builder (
  ohjain: ohjain,
  itemBuilder: (konteksti, sijainti) {
    if (position == currentPageValue.floor ()) {
      paluu muunnos (
        muunnos: Matrix4.identity () .. setEntry (3, 2, 0,004) .. rotateY (currentPageValue - sijainti) .. rotateZ (currentPageValue - sijainti),
        lapsi: kontti (
          väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
          lapsi: Center (
            lapsi: Teksti (
              "Sivu",
              tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
            ),
          ),
        ),
      );
    } else if (position == currentPageValue.floor () + 1) {
      paluu muunnos (
        muunnos: Matrix4.identity () .. setEntry (3, 2, 0,004) .. rotateY (currentPageValue - sijainti) .. rotateZ (currentPageValue - sijainti),
        lapsi: kontti (
          väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
          lapsi: Center (
            lapsi: Teksti (
              "Sivu",
              tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
            ),
          ),
        ),
      );
    } muuta {
      paluukontti (
        väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
        lapsi: Center (
          lapsi: Teksti (
            "Sivu",
            tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
          ),
        ),
      );
    }
  },
  itemCount: 10,
)

Linja

..setEntry (3, 2, 0,004)

antaa sivuille 3D-vaikutelman.

Siirtymä 4

PageView.builder (
  ohjain: ohjain,
  itemBuilder: (konteksti, sijainti) {
    if (position == currentPageValue.floor ()) {
      paluu muunnos (
        kohdistus: Alignment.center,
        muunnos: Matriisi4.identiteetti () .. setEntry (3, 2, 0,001)
          ..rotateX (currentPageValue - sijainti)
          ..rotateY (currentPageValue - sijainti)
          ..rotateZ (currentPageValue - sijainti),
        lapsi: kontti (
          väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
          lapsi: Center (
            lapsi: Teksti (
              "Sivu",
              tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
            ),
          ),
        ),
      );
    } else if (position == currentPageValue.floor () + 1) {
      paluu muunnos (
        kohdistus: Alignment.center,
        muunnos: Matriisi4.identiteetti () .. setEntry (3, 2, 0,001)
          ..rotateX (currentPageValue - sijainti)
          ..rotateY (currentPageValue - sijainti)
          ..rotateZ (currentPageValue - sijainti),
        lapsi: kontti (
          väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
          lapsi: Center (
            lapsi: Teksti (
              "Sivu",
              tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
            ),
          ),
        ),
      );
    } muuta {
      paluukontti (
        väri: sijainti% 2 == 0? Värit.sininen: Värit.pink,
        lapsi: Center (
          lapsi: Teksti (
            "Sivu",
            tyyli: TextStyle (väri: Colors.white, fontSize: 22.0),
          ),
        ),
      );
    }
  },
  itemCount: 10,
)

Paljon enemmän tyyppejä voidaan luoda muuttamalla yksinkertaisesti kiertokulmia, akseleita, suuntauksia ja käännöksiä.

Esittelysovellus PageView-sovelluksen avulla

Osoittaakseni yksinkertaisen sovelluksen, joka käyttää PageView-sovellusta Flutter-ohjelmassa, loin esimerkki-sovelluksen, joka opiskeli sanoja GRE: lle. Tämä sovellus näyttää ja antaa käyttäjän tallentaa vaikeimmat sanat SQLiten avulla niiden tallentamiseksi. Siinä on myös teksti puheeksi -sanan sanan itse lausumiseksi.

Löydät tämän sovelluksen täältä: https://github.com/deven98/FlutterGREWords

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.

Tutustu myös muihin profiileihini ja artikkeleihini:

Jotkut muista artikkeleistani