3D ListView in Flutter (Polski)

(23 września 2020 r.)

ListWheelScrollView

ListWheelScrollView to trzepotliwy widżet używany do tworzenia ListView z 3D- efekt. Ten widget jest podobny do ListView, ale ListWheelScrollView dodaje jego elementy podrzędne w przewijalnym kole. Daje to efekt 3D, tak jakby dzieci obracały się w kole.

Podstawowe użycie
Są dwa wymagane parametry:
children ( List ) i itemExtent ( double ). Elementy podrzędne, które są elementem listy, są przekazywane do delegata i leniwie budowane podczas tworzenia układu. Właściwość itemExtent służy do ustawiania rozmiaru każdego elementu na głównej osi.

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

Jest to stosunek średnicy cylindra do rozmiaru okna renderowania głównej osi, wartość domyślna to 2 . Jeśli jest w pionie, rozmiar okna renderowania głównej osi to wysokość ListWheelScrollView. Im mniejszy stosunek średnicy, tym bardziej okrągły cylinder.

diameterRatio: 1

offAxisFraction

Wskazuje stopień odchylenia poziomego koła od środka.

offAxisFraction: -1.5

Zobaczmy efekt działania tej właściwości

lupa

useMagnifier : Powiększenie środkowego (aktualnie wybranego)
magnification: Ustaw powiększony rozmiar (wartość powiększenia)

Użyj useMagnifier z magnification , aby uzyskać efekt lupy .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier i powiększenie

onSelectedItemChanged

Wybrany element to ten, który aktualnie znajduje się na środku koła. Zmienia się za każdym razem, gdy użytkownik przewija w górę lub w dół. Aby uzyskać indeks wybranego elementu, możesz przekazać funkcję zwrotną jako właściwość onSelectedItemChanged. Jest to typ, który akceptuje parametr będący liczbą całkowitą.

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

useDelegate

Istnieje inny sposób utworzenia ListWheelScrollView przy użyciu nazwanego konstruktora .useDelegate(). Zamiast tego zaliczenia children, musisz przekazać ListWheelChildDelegate, aby zbudować dzieci.

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

Oficjalną dokumentację ListWheelScrollView tutaj można znaleźć w celu zapoznania się z innymi właściwościami.

Jeśli uznasz ten artykuł za przydatny, klaskaj go.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *