3D ListView in Flutter (Norsk)

(23. sep 2020)

ListWheelScrollView

ListWheelScrollView er en flagrende widget som brukes til å bygge ListView med 3D- effekt. Denne widgeten ligner på en ListView, men ListWheelScrollView legger til barna i et rullbart hjul. Det resulterer i en 3D-effekt som om barna roterer i et hjul.

Grunnleggende bruk
Det er to nødvendige parametere:
children ( List ) og itemExtent ( double ). Barna som er listeelementet sendes til en delegat og bygges lat i løpet av oppsettet. itemExtent egenskapen brukes til å angi størrelsen på hvert element i hovedaksen.

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

Det er forholdet mellom sylinderdiameteren og størrelsen på hovedaksen som gjengir vinduet, standardverdien er 2 . Hvis den er loddrett, er størrelsen på hovedaksen gjengivelsesvinduet høyden på ListWheelScrollView. Jo mindre diameterforholdet er, desto rundere er sylinderen.

diameterRatio: 1

offAxisFraction

Det indikerer graden av hjulets horisontale avvik fra midten.

offAxisFraction: -1.5

La oss se effekten av denne egenskapen

forstørrelsesglass

useMagnifier : Forstørrelse for sentralen (nåværende valgt)
magnification: Still inn zoomet størrelse (zoom inn verdi)

Bruk useMagnifier med magnification for å oppnå en forstørrelsesglasseffekt .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier og forstørrelse

onSelectedItemChanged

Det valgte elementet er det som er midt i hjulet. Det endres hver gang brukeren ruller opp / ned. For å få indeksen for det valgte elementet, kan du sende en tilbakeringingsfunksjon som onSelectedItemChanged -egenskap. Den er av typen som godtar et heltallsparameter.

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

useDelegate

Det er en annen måte å lage en ListWheelScrollView ved å bruke .useDelegate() navngitt konstruktør. I stedet for å passere children, må du sende en ListWheelChildDelegate for å bygge barna.

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),
),

Du finner den offisielle dokumentasjonen til ListWheelScrollView her for å utforske flere egenskaper.

Hvis du synes denne artikkelen er nyttig, gi den et klapp.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *