ListView 3D în Flutter

(23 septembrie 2020)

ListWheelScrollView

ListWheelScrollView este un widget flutter utilizat pentru a crea ListView cu 3D- efect. Acest widget este similar cu un ListView, dar ListWheelScrollView își adaugă copiii într-o roată derulabilă. Acest lucru are ca rezultat un efect 3D ca și cum copiii se rotesc într-o roată.

Utilizare de bază
Există doi parametri necesari:
children ( List ) și itemExtent ( double ). Copiii care sunt elementul listei sunt trecuți unui delegat și construiți leneș în timpul aspectului. Proprietatea itemExtent este utilizată pentru a seta dimensiunea fiecărui element din axa principală.

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

Este raportul dintre diametrul cilindrului și dimensiunea ferestrei de redare a axei principale, valoarea implicită este 2 , Dacă este verticală, dimensiunea ferestrei de redare a axei principale este înălțimea ListWheelScrollView. Cu cât raportul de diametru este mai mic, cu atât cilindrul este mai rotund.

diameterRatio: 1

offAxisFraction

Indică gradul de abatere orizontală a roții de la centru.

offAxisFraction: -1.5

Să vedem efectul acestei proprietăți

lupă

useMagnifier : Mărire pentru centrală (selectată curent)
magnification: Setați dimensiunea mărită (valoarea măririi)

Utilizați useMagnifier cu magnification pentru a obține un efect de lupă .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier și mărire

onSelectedItemChanged

Elementul selectat este cel aflat în prezent în centrul roții. Se schimbă de fiecare dată când utilizatorul derulează în sus / în jos. Pentru a obține indexul elementului selectat, puteți trece o funcție de apel invers ca proprietate onSelectedItemChanged. Este de tip, care acceptă un parametru întreg.

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

useDelegate

Există un alt mod de a crea un ListWheelScrollView utilizând .useDelegate() constructor numit. de trecere children, trebuie să treceți un ListWheelChildDelegate pentru a construi copiii.

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

Vă rugăm să găsiți documentația oficială a ListWheelScrollView aici pentru a explora mai multe proprietăți.

Dacă vi se pare util acest articol, dați-i o palme.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *