3D ListView in Flutter

(23 september 2020)

ListWheelScrollView

ListWheelScrollView is een flutterwidget die wordt gebruikt om ListView te bouwen met 3D- effect. Deze widget is vergelijkbaar met een ListView, maar ListWheelScrollView voegt zijn kinderen toe aan een scrollwiel. Dat resulteert in een 3D-effect alsof de kinderen in een wiel draaien.

Basisgebruik
Er zijn twee vereiste parameters:
children ( List ) en itemExtent ( double ). De kinderen die op de lijst staan, worden doorgegeven aan een afgevaardigde en lui gebouwd tijdens het opmaken. De itemExtent eigenschap wordt gebruikt om de grootte van elk item in de hoofdas in te stellen.

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

Het is de verhouding tussen de diameter van de cilinder en de grootte van het weergavevenster van de hoofdas, de standaardwaarde is 2 . Als het verticaal is, is de grootte van het hoofdasweergavevenster de hoogte van ListWheelScrollView. Hoe kleiner de diameterverhouding, hoe ronder de cilinder.

diameterRatio: 1

offAxisFraction

Het geeft de mate van horizontale afwijking van het wiel ten opzichte van het midden aan.

offAxisFraction: -1.5

Laten we eens kijken naar het effect van deze eigenschap

vergrootglas

useMagnifier : Vergroting voor de middelste (huidige geselecteerde)
magnification: Stel de ingezoomde grootte in (inzoomwaarde)

Gebruik useMagnifier met magnification om een ​​vergrootglaseffect te bereiken .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier en vergroting

onSelectedItemChanged

Het geselecteerde item bevindt zich momenteel in het midden van het wiel. Het wordt elke keer dat de gebruiker omhoog / omlaag scrolt, gewijzigd. Om de index van het geselecteerde item op te halen, kunt u een callback-functie doorgeven als onSelectedItemChanged eigenschap. Het is een type dat een parameter met een geheel getal accepteert.

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

useDelegate

Er is een andere manier om een ​​ListWheelScrollView te maken door .useDelegate() met de naam constructor te gebruiken. van het doorgeven van children, moet u een ListWheelChildDelegate doorgeven om de kinderen te bouwen.

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

Vind de officiële documentatie van ListWheelScrollView hier om meer eigenschappen te verkennen.

Als u dit artikel nuttig vindt, geef het dan een klap.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *