3D ListView in Flutter (Dansk)

(23. sep 2020)

ListWheelScrollView

ListWheelScrollView er en flagrende widget, der bruges til at opbygge ListView med 3D- effekt. Denne widget ligner en ListView, men ListWheelScrollView tilføjer sine børn i et rullehjul. Det resulterer i en 3D-effekt, som om børnene roterer i et hjul.

Grundlæggende brug
Der er to krævede parametre:
children ( List ) og itemExtent ( double ). Børnene, der er listeelementet, sendes til en delegeret og laves dovent under layoutet. itemExtent egenskaben bruges til at indstille 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 mellem cylinderdiameteren og størrelsen af ​​hovedakseens gengivelsesvindue, standardværdien er 2 . Hvis den er lodret, er størrelsen på vinduet til gengivelse af hovedaksen højden på ListWheelScrollView. Jo mindre diameterforholdet er, desto rundere er cylinderen.

diameterRatio: 1

offAxisFraction

Det angiver graden af ​​hjulets vandrette afvigelse fra midten.

offAxisFraction: -1.5

Lad os se effekten af ​​denne egenskab

forstørrelsesglas

useMagnifier : Forstørrelse for det centrale (aktuelt valgt)
magnification: Indstil den zoomede størrelse (zoom-ind-værdi)

Brug useMagnifier med magnification for at opnå en forstørrelsesglaseffekt .

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

onSelectedItemChanged

Det valgte emne er det, der aktuelt er i midten af ​​hjulet. Det ændres hver gang brugeren ruller op / ned. For at få indekset for det valgte element kan du videregive en tilbagekaldsfunktion som onSelectedItemChanged egenskab. Det er af typen, der accepterer et heltalsparameter.

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

useDelegate

Der er en anden måde at oprette en ListWheelScrollView ved at bruge .useDelegate() navngivet konstruktør. I stedet for for at passere children, skal du videregive en ListWheelChildDelegate for at opbygge børnene.

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

Find den officielle dokumentation for ListWheelScrollView her for at udforske flere egenskaber.

Hvis du finder denne artikel nyttig, skal du give den et klapp.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *