3D ListView in Flutter (Svenska)

(23 sep 2020)

ListWheelScrollView

ListWheelScrollView är en fladder-widget som används för att bygga ListView med 3D- effekt. Denna widget liknar en ListView men ListWheelScrollView lägger till sina barn i ett rullbart hjul. Det resulterar i en 3D-effekt som om barnen roterar i ett hjul.

Grundläggande användning
Det finns två nödvändiga parametrar:
children ( List ) och itemExtent ( double ). Barnen som är listobjektet skickas till en delegat och byggs slappt under layouten. Egenskapen itemExtent används för att ställa in storleken på varje objekt i huvudaxeln.

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 är förhållandet mellan cylinderns diameter och storleken på huvudaxelns återgivningsfönster, standardvärdet är 2 . Om det är vertikalt är storleken på huvudaxelens renderingsfönster höjden på ListWheelScrollView. Ju mindre diameterförhållandet är, desto rundare är cylindern.

diameterRatio: 1

offAxisFraction

Det anger graden av hjulets horisontella avvikelse från centrum.

offAxisFraction: -1.5

Låt oss se effekten av den här egenskapen

förstoringsglas

useMagnifier : Förstoring för det centrala (nuvarande valt)
magnification: Ställ in den zoomade storleken (zoomningsvärde)

Använd useMagnifier med magnification för att uppnå en förstoringsglaseffekt .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier och förstoring

onSelectedItemChanged

Det valda objektet är för närvarande mitt på hjulet. Det ändras varje gång användaren rullar upp / ner. För att få index för det valda objektet kan du skicka en återuppringningsfunktion som onSelectedItemChanged -egenskap. Det är av typen som accepterar en heltalsparameter.

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

useDelegate

Det finns ett annat sätt att skapa en ListWheelScrollView genom att använda .useDelegate() namngiven konstruktör. Istället för att skicka children måste du skicka ett ListWheelChildDelegate för att bygga barnen.

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

Hitta den officiella dokumentationen för ListWheelScrollView här för att utforska fler egenskaper.

Om du tycker att den här artikeln är användbar, ge den en klapp.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *