Visualizzazione elenco 3D in Flutter

(23 settembre 2020)

ListWheelScrollView

ListWheelScrollView è un widget flutter utilizzato per creare ListView con 3D- effetto. Questo widget è simile a un ListView ma ListWheelScrollView aggiunge i suoi figli in una rotella scorrevole. Ciò si traduce in un effetto 3D come se i bambini ruotassero su una ruota.

Utilizzo di base
Ci sono due parametri obbligatori:
children ( List ) e itemExtent ( double ). Gli elementi figlio che sono lelemento dellelenco vengono passati a un delegato e creati pigramente durante il layout. La proprietà itemExtent viene utilizzata per impostare la dimensione di ogni elemento nellasse principale.

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

È il rapporto tra il diametro del cilindro e la dimensione della finestra di rendering dellasse principale, il il valore predefinito è 2 . Se è verticale, la dimensione della finestra di rendering dellasse principale è laltezza di ListWheelScrollView. Minore è il rapporto del diametro, più rotondo è il cilindro.

diameterRatio: 1

offAxisFraction

Indica il grado di deviazione orizzontale della ruota dal centro.

offAxisFraction: -1.5

Vediamo leffetto di questa proprietà

lente dingrandimento

useMagnifier : Ingrandimento per il centro (attualmente selezionato)
magnification: Imposta la dimensione ingrandita (valore di ingrandimento)

Utilizza useMagnifier con magnification per ottenere un effetto lente di ingrandimento .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier e ingrandimento

onSelectedItemChanged

Lelemento selezionato è quello attualmente al centro della ruota. Viene modificato ogni volta che lutente scorre su / giù. Per ottenere lindice dellelemento selezionato, puoi passare una funzione di callback come proprietà onSelectedItemChanged. È di tipo, che accetta un parametro intero.

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

useDelegate

Esiste un altro modo per creare un ListWheelScrollView utilizzando .useDelegate() costruttore denominato. Invece di passare children, devi passare un ListWheelChildDelegate per costruire i bambini.

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

Trova la documentazione ufficiale di ListWheelScrollView qui per esplorare altre proprietà.

Se trovi utile questo articolo, dagli un applauso.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *