3D ListView in Flutter (Magyar)

(2020.09.23.)

ListWheelScrollView

ListWheelScrollView egy csapkodó widget, amelyet a ListView felépítéséhez használnak a 3D- effektus. Ez a modul hasonló a ListView-hoz, de a ListWheelScrollView egy görgethető kerékben adja hozzá gyermekeit. Ez olyan 3D-s hatást eredményez, mintha a gyerekek kerékben forognának.

Alapvető használat
Két szükséges paraméter van:
children ( List ) és itemExtent ( double ). A listaelemként szereplő gyerekeket átadják egy küldöttnek, és lustán felépítik az elrendezés során. A itemExtent tulajdonság a főtengelyben lévő egyes elemek méretének beállítására szolgál.

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

Ez a henger átmérőjének és a fő tengely renderelő ablakának, a az alapértelmezett érték 2 , ha függőleges, akkor a fő tengely-megjelenítő ablak mérete a ListWheelScrollView magassága. Minél kisebb az átmérő arány, annál kerekebb a henger.

diameterRatio: 1

offAxisFraction

Jelzi a kerék vízszintes eltérését a középponttól.

offAxisFraction: -1.5

Nézzük meg ennek a tulajdonságnak a hatását

nagyító

useMagnifier : Nagyítás a központi (aktuálisan kiválasztott) oldalra
magnification: A nagyított méret beállítása (nagyítási érték)

Használjon useMagnifier a magnification használatával a nagyítóhatás eléréséhez .

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier és nagyítás

onSelectedItemChanged

A kiválasztott elem a kerék közepén található. Minden alkalommal megváltozik, amikor a felhasználó fel / le görget. A kiválasztott elem indexének megszerzéséhez átadhat egy visszahívási függvényt onSelectedItemChanged tulajdonságként. Ez olyan típusú, amely elfogad egy egész paramétert.

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

useDelegate

Van egy másik módszer a ListWheelScrollView létrehozására a .useDelegate() nevű konstruktor használatával. children átadásához át kell adnod egy ListWheelChildDelegate -t a gyerekek felépítéséhez.

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

A további tulajdonságok megismeréséhez keresse a ListWheelScrollView hivatalos dokumentációját.

Ha hasznosnak találja ezt a cikket, adjon tapsot neki.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük