Giluminis panardinimas į puslapio peržiūra plikai (su pasirinktiniais perėjimais)

Naršykite „PageView“ valdikliui ir sukurkite pasirinktinius puslapio perėjimus

Šis straipsnis yra septintasis iš straipsnių, kuriuose išsamiai pažvelgti į „Flutter“ įmontuotus valdiklius, serijos.

  1. „ListView“ / „ScrollPhysics“
  2. Teksto laukai
  3. „FloatingActionButtons“
  4. Herojaus valdiklis
  5. Transformuoti valdiklį
  6. Nuvilkamas / „DragTarget“

Šiame straipsnyje apžvelgsime „PageView“, vėliau pateiksime keletą pritaikytų efektų.

PASTABA: „ListView Deep Dive“ yra šio straipsnio pirmtakas. Straipsnyje aptarti elementai nebus pakartoti, nes jie beveik nesiskiria. Čia galite perskaityti mano „ListView“ straipsnį

Naršyti „PageViews“

„PageView“ yra valdiklis, sugeneruojantis ekrano puslapius. Tai gali būti fiksuotas puslapių sąrašas arba kūrimo funkcija, kuria kaupiamus puslapius. „PageView“ veikia panašiai kaip „ListView“ elementų konstravimo prasme.

„PageView“ tipai yra šie:

  1. „PageView“
  2. „PageView.builder“
  3. „PageView.custom“

„PageView“ (numatytasis konstruktorius)

Šis tipas užfiksuoja fiksuotą vaikų sąrašą (puslapius) ir leidžia juos slinkti.

„PageView“ (
  vaikai:  [
    Konteineris (
      spalva: Colors.pink,
    ),
    Konteineris (
      spalva: Colors.cyan,
    ),
    Konteineris (
      spalva: Colors.deepPurple,
    ),
  ],
)

Aukščiau pateiktas kodas duoda tokį rezultatą:

„PageView.builder“

Šis konstruktorius paima „itemBuilder“ funkciją ir „itemCount“, panašų į „ListView.builder“

„PageView.builder“ (
  itemBuilder: (kontekstas, padėtis) {
    grįžti _buildPage ();
  },
  itemCount: listItemCount, // Gali būti niekinis
)

Kaip ir „ListView.builder“, tai kuria vaikus pagal poreikį.

Jei „itemCount“ yra nulinis (nenustatytas), gali būti sugeneruotas begalinis puslapių sąrašas.

Pavyzdžiui, šis kodas:

„PageView.builder“ (
  itemBuilder: (kontekstas, padėtis) {
    grąžinti konteinerį (
      spalva: padėtis% 2 == 0? „Colors.pink“: „Colors.cyan“,
    );
  },
)

Pateikiamas begalinis sąrašas lapų su pakaitomis rausva ir žalsvai mėlyna spalva:

Pastaba: „PageView.custom“ veikia taip pat kaip „ListView.custom“ (aptarta ankstesniame „Deep Dive“) ir mes apie tai čia nekalbėsime.

Orientacija

Visų tipų puslapių peržiūros puslapiai gali būti horizontalūs arba vertikalūs.

„PageView“ (
  vaikai:  [
    // Čia pridėkite vaikus
  ],
  „scrollDirection“: „Axis.vertical“,
)

Aukščiau pateiktas kodas suteikia mums:

„PageSnapping“

Puslapio rodymas leidžia mums išlaikyti vidutines puslapio vertes. Tai atliekama išjungiant „pageSnapping“ atributą. Tokiu atveju puslapis neslinks į sveiką skaičių ir elgsis kaip įprasta „ListView“.

„PageView“ (
  vaikai:  [
    // Čia pridėkite vaikus
  ],
  pagenaps: klaidinga,
)

„ScrollPhysics“

„PageView“ gali tinkinti slinkties elgseną taip pat kaip „ListViews“. Mes nekartosime skirtingų „ScrollPhysics“ tipų, nes jie aptariami „ListView Deep Dive“.

„ScrollPhysics“ galima pakeisti naudojant fizikos parametrą:

„PageView“ (
  vaikai:  [
    // Čia pridėkite vaikus
  ],
  fizika: „BouncingScrollPhysics“ (),
)

„PageView“ valdymas

„PageView“ programiškai galima valdyti pridedant „PageController“.

// Pastatymo iš išorės metodas
„PageController“ valdiklis = „PageController“ ();
// Pastatymo iš vidaus metodas
„PageView“ (
  valdiklis: valdiklis,
  vaikai:  [
    // Įtraukite vaikus
  ],
)

Slinkimo padėtį, dabartinį puslapį ir kt. Galima patikrinti naudojant valdiklį.

Pastaba: „controller.currentPage“ grąžina dvigubą vertę. Pvz., Kai puslapis perbraukiamas, reikšmė laipsniškai kinta nuo 1 iki 2 ir nejučia pereinama prie 2.

Tinkintų perėjimų pridėjimas prie „PageViews“

Aptarkime keletą pridedamų perėjimų prie puslapių pridedant naudojant „Transform + + PageView“. Šioje dalyje bus plačiai naudojamas valdiklis „Transformuoti“ ir aš rekomenduoju perskaityti vieną iš daugelio valdiklio straipsnių.

Mano rekomendacijos būtų mano parašytas „Deep Dive“ ir „WM Leler“ „Transform“ straipsnis.

1 perėjimas

Sąranka

Pirmiausia naudojame pagrindinį „PageView.builder“

„PageView.builder“ (
  valdiklis: valdiklis,
  itemBuilder: (kontekstas, padėtis) {
  },
  itemCount: 10,
)

Dabar turėsime 10 elementų.

Mes naudojame „PageController“ ir kintamąjį, kuris išlaiko „currentPage“ vertę.

„PageController“ ir kintamųjų apibrėžimas:

„PageController“ valdiklis = „PageController“ ();
var currentPageValue = 0,0;

Kintamojo atnaujinimas, kai slenkama „PageView“.

controller.addListener (() {
  „setState“ (() {
    currentPageValue = valdiklio puslapis.
  });
});

Galiausiai sukonstruojame „PageView“.

Dabar patikrinkime tris sąlygas:

  1. Jei puslapis yra tas puslapis, iš kurio perbraukta
  2. Jei puslapis yra tas puslapis, į kurį perbraukta
  3. Jei puslapis yra ne ekrano puslapis
„PageView.builder“ (
  valdiklis: valdiklis,
  itemBuilder: (kontekstas, padėtis) {
    if (position == currentPageValue.floor ()) {
    } else if (position == currentAnimationValue.floor () + 1) {
      
    } Kitas {
      
    }
  },
  itemCount: 10,
)

Dabar mes grąžiname tą patį puslapį, bet apvyniotą valdikliu „Transformuoti“, kad galėtume paversti mūsų puslapius jį perbraukdami.

„PageView.builder“ (
  valdiklis: valdiklis,
  itemBuilder: (kontekstas, padėtis) {
    if (position == currentPageValue.floor ()) {
      grąžinti transformaciją (
        transformacija: Matrix4.identity () .. rotateX (currentPageValue - padėtis),
        vaikas: konteineris (
          spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
          vaikas: centras (
            vaikas: tekstas (
              „Puslapis“,
              stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
            ),
          ),
        ),
      );
    } else if (pozicija == currentPageValue.floor () + 1) {
      grąžinti transformaciją (
        transformacija: Matrix4.identity () .. rotateX (currentPageValue - padėtis),
        vaikas: konteineris (
          spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
          vaikas: centras (
            vaikas: tekstas (
              „Puslapis“,
              stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
            ),
          ),
        ),
      );
    } Kitas {
      grąžinti konteinerį (
        spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
        vaikas: centras (
          vaikas: tekstas (
            „Puslapis“,
            stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
          ),
        ),
      );
    }
  },
  itemCount: 10,
)

Čia mes keičiame puslapį, iš kurio perbraukiamas, ir puslapį, į kurį perbraukiama.

currentPageValue.floor () suteikia mums puslapį kairėje ir

currentPageValue.floor () suteikia mums puslapį dešinėje

Šiame pavyzdyje mes pasukame puslapį X kryptimi, nes jis pasislenka iš currentPageValue vertės atėmus indeksą spinduliuose. Galite sustiprinti efektą padauginę iš šios vertės.

Galime pakoreguoti šią transformaciją ir jos suderinimą, kad suteiktume kelių tipų naujus puslapių perėjimus.

2 perėjimas

Panaši kodo struktūra, tik su skirtinga transformacija:

„PageView.builder“ (
  valdiklis: valdiklis,
  itemBuilder: (kontekstas, padėtis) {
    if (position == currentPageValue.floor ()) {
      grąžinti transformaciją (
        transformacija: Matrix4.identity () .. rotateY (currentPageValue - position) .. rotateZ (currentPageValue - position),
        vaikas: konteineris (
          spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
          vaikas: centras (
            vaikas: tekstas (
              „Puslapis“,
              stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
            ),
          ),
        ),
      );
    } else if (pozicija == currentPageValue.floor () + 1) {
      grąžinti transformaciją (
        transformacija: Matrix4.identity () .. rotateY (currentPageValue - position) .. rotateZ (currentPageValue - position),
        vaikas: konteineris (
          spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
          vaikas: centras (
            vaikas: tekstas (
              „Puslapis“,
              stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
            ),
          ),
        ),
      );
    } Kitas {
      grąžinti konteinerį (
        spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
        vaikas: centras (
          vaikas: tekstas (
            „Puslapis“,
            stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
          ),
        ),
      );
    }
  },
  itemCount: 10,
)

Čia sukame tiek Y, tiek Z ašis.

3 perėjimas

Tai panašus perėjimo tipas praėjusį kartą, tačiau pridėtas 3D efektas.

„PageView.builder“ (
  valdiklis: valdiklis,
  itemBuilder: (kontekstas, padėtis) {
    if (position == currentPageValue.floor ()) {
      grąžinti transformaciją (
        transformacija: Matrix4.identity () .. setEntry (3, 2, 0,004) .. rotateY (currentPageValue - position) .. rotateZ (currentPageValue - position),
        vaikas: konteineris (
          spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
          vaikas: centras (
            vaikas: tekstas (
              „Puslapis“,
              stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
            ),
          ),
        ),
      );
    } else if (pozicija == currentPageValue.floor () + 1) {
      grąžinti transformaciją (
        transformacija: Matrix4.identity () .. setEntry (3, 2, 0,004) .. rotateY (currentPageValue - position) .. rotateZ (currentPageValue - position),
        vaikas: konteineris (
          spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
          vaikas: centras (
            vaikas: tekstas (
              „Puslapis“,
              stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
            ),
          ),
        ),
      );
    } Kitas {
      grąžinti konteinerį (
        spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
        vaikas: centras (
          vaikas: tekstas (
            „Puslapis“,
            stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
          ),
        ),
      );
    }
  },
  itemCount: 10,
)

Linija

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

suteikia puslapiams 3D efektą.

4 perėjimas

„PageView.builder“ (
  valdiklis: valdiklis,
  itemBuilder: (kontekstas, padėtis) {
    if (position == currentPageValue.floor ()) {
      grąžinti transformaciją (
        lygiavimas: Alignment.center,
        transformacija: Matrix4.identity () .. setEntry (3, 2, 0,001)
          ..rotateX (currentPageValue - padėtis)
          ..rotateY (currentPageValue - padėtis)
          ..rotateZ (currentPageValue - padėtis),
        vaikas: konteineris (
          spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
          vaikas: centras (
            vaikas: tekstas (
              „Puslapis“,
              stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
            ),
          ),
        ),
      );
    } else if (pozicija == currentPageValue.floor () + 1) {
      grąžinti transformaciją (
        lygiavimas: Alignment.center,
        transformacija: Matrix4.identity () .. setEntry (3, 2, 0,001)
          ..rotateX (currentPageValue - padėtis)
          ..rotateY (currentPageValue - padėtis)
          ..rotateZ (currentPageValue - padėtis),
        vaikas: konteineris (
          spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
          vaikas: centras (
            vaikas: tekstas (
              „Puslapis“,
              stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
            ),
          ),
        ),
      );
    } Kitas {
      grąžinti konteinerį (
        spalva: padėtis% 2 == 0? „Colors.blue“: „Colors.pink“,
        vaikas: centras (
          vaikas: tekstas (
            „Puslapis“,
            stilius: „TextStyle“ (spalva: Spalvos.balta, šrifto dydis: 22,0),
          ),
        ),
      );
    }
  },
  itemCount: 10,
)

Daug daugiau rūšių galima sukurti tiesiog keičiant pasukimo kampus, ašis, išlygius ir vertimus.

Demonstravimo programa naudojant „PageView“

Norėdami parodyti paprastą programą, naudodami „PageView“ programoje „Flutter“, sukūriau programos pavyzdį, skirtą GRE žodžiams tirti. Ši programa rodo ir leidžia vartotojui išsaugoti sunkiausius žodžius, naudodama „SQLite“, kad juos išsaugotų. Jis taip pat turi „Tekstas į kalbą“, skirtą pačiam žodžiui ištarti.

Šią programą galite rasti čia: https://github.com/deven98/FlutterGREWords

Štai šis straipsnis! Tikiuosi, kad jums tai patiko, ir palikite keletą gniaužtų, jei tai padarėte. Sekite mane, jei norite pamatyti daugiau straipsnių apie „Flutter“, ir komentuokite, jei norite gauti atsiliepimų apie šį straipsnį.

Nesivaržykite peržiūrėti ir kitų mano profilių bei straipsnių:

Kai kurie kiti mano straipsniai