3D ListView ve flutteru

(23. září 2020)

ListWheelScrollView

ListWheelScrollView je flutterový widget používaný k vytváření ListView pomocí 3D- efekt. Tento widget je podobný ListView, ale ListWheelScrollView přidává své děti do rolovacího kolečka. Výsledkem je 3D efekt, jako by se děti otáčely v kolečku.

Základní použití
Existují dva povinné parametry:
children ( List ) a itemExtent ( double ). Děti, které jsou položkou seznamu, jsou předány delegátovi a líně sestaveny během rozložení. Vlastnost itemExtent slouží k nastavení velikosti každé položky v hlavní ose.

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

Je to poměr průměru válce k velikosti okna vykreslení hlavní osy, výchozí hodnota je 2 , pokud je svislá, velikost okna vykreslení hlavní osy je výška ListWheelScrollView. Čím menší je poměr průměrů, tím je válec zaoblenější.

diameterRatio: 1

offAxisFraction

Udává stupeň vodorovné odchylky kola od středu.

offAxisFraction: -1.5

Podívejme se na účinek této vlastnosti

lupa

useMagnifier : Zvětšení na střed (aktuálně vybrané)
magnification: Nastavit zvětšenou velikost (hodnota přiblížení)

Použijte useMagnifier s magnification k dosažení efektu lupy .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier a zvětšení

onSelectedItemChanged

Vybraná položka je ta, která je aktuálně uprostřed kola. Změní se to pokaždé, když uživatel posouvá nahoru / dolů. Chcete-li získat index vybrané položky, můžete předat funkci zpětného volání jako vlastnost onSelectedItemChanged. Jde o typ, který přijímá celočíselný parametr.

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

useDelegate

Existuje jiný způsob, jak vytvořit ListWheelScrollView pomocí .useDelegate() pojmenovaného konstruktoru. Místo toho z absolvování children musíte předat ListWheelChildDelegate k vytvoření dětí.

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

Naleznete oficiální dokumentaci ListWheelScrollView zde a prozkoumejte další vlastnosti.

Pokud vám tento článek připadá užitečný, udělejte mu tleskání.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *