3D ListView in Flutter (Suomi)

(23. syyskuuta 2020)

ListWheelScrollView

ListWheelScrollView on lepatus-widget, jota käytetään ListViewn rakentamiseen 3D- vaikutus. Tämä widget on samanlainen kuin ListView, mutta ListWheelScrollView lisää lapsensa vieritettävään pyörään. Tämä johtaa 3D-ilmiöön ikään kuin lapset pyörivät pyörässä.

Peruskäyttö
Vaaditaan kaksi parametria:
children ( List ) ja itemExtent ( double ). Luettelokohteena olevat lapset välitetään edustajalle ja rakennetaan laiskasti ulkoasun aikana. Ominaisuutta itemExtent käytetään määrittämään kunkin pääakselin kohteen koko.

ListWheelScrollView(
itemExtent: 50,
children: List.generate(1000, (index) => index)
.map(
(text) => Container(
margin: EdgeInsets.only(left: 20, right: 20),
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
child: Center(child: Text(text.toString())),
),
)
.toList(),
),

diameterRatio

Se on sylinterin halkaisijan suhde pääakselin renderointiikkunan, oletusarvo on 2 , Jos se on pystysuora, pääakselin renderointi-ikkunan koko on ListWheelScrollView-korkeus. Mitä pienempi halkaisijasuhde, sitä pyöristetty sylinteri.

diameterRatio: 1

offAxisFraction

Se osoittaa pyörän vaakatason poikkeaman asteen keskipisteestä.

offAxisFraction: -1.5

Katsotaanpa tämän ominaisuuden vaikutus

suurennuslasi

useMagnifier : Keskuksen (nykyinen valittu) suurennus
magnification: Suurennetun koon asettaminen (zoom-arvo)

Käytä useMagnifier kanssa magnification suurennuslasitehosteen saavuttamiseksi .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier ja suurennus

onSelectedItemChanged

Valittu kohde on tällä hetkellä pyörän keskellä. Se muuttuu aina, kun käyttäjä vierittää ylös / alas. Jos haluat hakea valitun kohteen hakemiston, voit välittää soittopyynnön onSelectedItemChanged -ominaisuutena. Se on tyyppiä, joka hyväksyy kokonaislukuparametrin.

onSelectedItemChanged: (index) => {
print(index)
},

useDelegate

On toinen tapa luoda ListWheelScrollView käyttämällä .useDelegate() -nimistä konstruktoria. children ohittaa, sinun on läpäistävä ListWheelChildDelegate lasten rakentamiseksi.

ListWheelScrollView.useDelegate(
itemExtent: 50,
childDelegate: ListWheelChildBuilderDelegate(
builder: (context, index) {
return Container(
margin: EdgeInsets.only(left: 20, right: 20),
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
alignment: Alignment.center,
child: Text("$index"),
);
},
childCount: 1000),
),

Löydät ListWheelScrollView-viralliset ohjeet täältä tutkiakseen lisää ominaisuuksia.

Jos tämä artikkeli on hyödyllinen, anna sille taputus.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *