Giliai pasinerkite į herojaus valdiklius

Vadovėlis apie didvyrių valdiklius „Flutter“

Šis straipsnis yra ketvirtasis straipsnis iš straipsnių, skirtų išsamiam „Flutter“ valdiklių tyrimui. Išsamiai apėmę „ListViews“, „TextFields“ ir „FloatingActionButtons“, dabar pateksime į „Hero“ valdiklį „Flutter“.

Įvadas į herojų animacijas

Herojaus animacija viename sakinyje yra paprasčiausias vieno ekrano elementas, „einantis“ į kitą, kai programa pereina į kitą puslapį.

„Hero Animations“ imasi tokio elemento kaip piktograma, kuri dabar vadinama „Hero“, ir kai tik suaktyvinamas puslapio perėjimas, paprastai spustelėjus piktogramą, herojus „skrenda“ į kitą puslapį. Kai vartotojas grįžta į ankstesnį puslapį, animacija eina kita kryptimi, o piktograma grįžta į savo vietą.

Aptarsime ne tik pagrindines herojų animacijas, bet ir dalykus, kuriuos galime pritaikyti. Pirmiausia pamatykime pagrindus.

Sukurti pagrindinę herojaus animaciją

Herojaus animacija yra turbūt viena lengviausių animacinių filmų, kuriuos reikia atlikti „Flutter“, ir nereikia daug nustatyti. Pažvelgę ​​į aukščiau pateiktą pavyzdį, galime pastebėti, kad abiejuose puslapiuose yra tas pats programos piktogramos valdiklis. Viskas, ko mums reikia, yra būdas pasakyti „Flutter“, kad abu jie yra susiję.

Mes tai darome apvyniodami elementą, pavyzdžiui, piktogramą herojaus valdiklyje.

Herojus(
  žyma: „DemoTag“,
  vaikas: piktograma (
    Icons.add,
    dydis: 70,0,
  ),
),

Mes pateikiame jam etiketę, kad suteiktume šiam konkrečiam herojui vardą. Tai būtina, nes jei viename puslapyje yra keli herojai, kiekvienas herojus žino, kur skristi.

Dabar programa žino, kad yra herojaus valdiklis, norintis skristi į kitą puslapį. Dabar mums viskas, ko mums reikia, yra kur skristi.

Viskas, ko mums reikia, yra herojaus valdiklis antrame puslapyje su ta pačia žyma.

Herojus(
  žyma: „DemoTag“,
  vaikas: piktograma (
    Icons.add,
    dydis: 150,0,
  ),
),

Ir tai lemia:

„Hero“ animacija, sukurta naudojant aukščiau esantį kodą

Hero animacijų tinkinimas

„Hero“ valdiklis leidžia mums pritaikyti animacijos aspektus. Panagrinėkime keletą galimybių.

Vietų ženklų įtraukimas

Valdiklis išskrenda iš tos vietos, kurioje anksčiau buvo, ir prieš tai, kai valdiklis pasiekia tikslą, paskirties vietoje yra tuščios vietos. Prie šios vietos galime pridėti vietos žymeklį.

Dabar naudokime „CircularProgressIndicator“ kaip vietos rezervuarą.

Herojus(
    žyma: „DemoTag“,
    vaikas: piktograma (
      Icons.add,
      dydis: 150,0,
    ),
    placeholderBuilder: (kontekstas, valdiklis) {
      grąžinti konteinerį (
        aukštis: 150,0,
        plotis: 150,0,
        vaikas: „CircularProgressIndicator“ (),
      );
    },
  ),

Vietos rezervuarą sukonstruojame ir grąžiname valdiklį, kurį norėtume turėti kaip vietos rezervuotę.

Vietos žymeklio naudojimas:

„CircularProgressIndicator“ užima herojaus vietą, kol jis atvyksta.

Valdiklio herojaus keitimas

„Flutter“ leidžia mums pakeisti valdiklį, kuris iš tikrųjų skraido iš vieno puslapio į kitą, nekeisdami abiejų puslapių valdiklių.

Panaudokime raketos piktogramą, o ne „+“ piktogramą kaip heroję, nekeisdami herojaus valdiklių vaikų.

Didvyrio piktograma keičiasi, tačiau galutinės piktogramos nesikeičia.

Tai darome naudodamiesi „flightShuttleBuilder“ parametru (vadinasi, raketos pavyzdys).

Herojus(
  žyma: „DemoTag“,
  vaikas: piktograma (
    Icons.add,
    dydis: 150,0,
  ),
  „flightShuttleBuilder“: („flightContext“, animacija, kryptis,
      fromContext, toContext) {
    grąžinimo piktograma („FontAwesomeIcons.rocket“, dydis: 150,0,);
  },
),

„FlightShuttleBuilder“ metodas turi 5 parametrus ir suteikia mums animaciją, taip pat animacijos kryptį.

Šiuo metu raketos piktogramos dydis yra 150,0 į abi puses. Naudodami metodo krypties parametrą, kiekvienai krypčiai galime turėti skirtingas konfigūracijas.

if (direction == HeroFlightDirection.push) {
  grąžinimo piktograma (
    „FontAwesomeIcons.rocket“,
    dydis: 150,0,
  );
} else if (direction == HeroFlightDirection.pop) {
  grąžinimo piktograma (
    „FontAwesomeIcons.rocket“,
    dydis: 70,0,
  );
}
Dabar dydžiai skiriasi skirtingomis kryptimis.

Kad „Hero“ animacija veiktų naudojant „iOS“ atgal perbraukimo gestus

Pagal numatytuosius nustatymus herojaus animacija veikia, kai paspaudžiamas „back“ mygtukas „iOS“, bet jie neveikia perbraukiant atgal.

Mygtuko „Atgal“ naudojimas:

Mygtukas „Atgal“ suaktyvina herojaus animaciją.

Naudojant perbraukimą atgal:

Atgal perbraukimas nesuaktyvina herojaus animacijos.

Norėdami tai išspręsti, abiejuose „Hero“ valdikliuose tiesiog nustatykite „transitOnUserGestures“ tiesą. Tai pagal nutylėjimą yra klaidinga.

Herojus(
  žyma: „DemoTag“,
  vaikas: piktograma (
    Icons.add,
  ),
  transitOnUserGestures: tiesa,
),

Ir tai suaktyvins herojų animacijas taip pat ir braukiant atgal.

Š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ų:

„Twitter“

„GitHub“

Kai kurie kiti mano straipsniai