3D ListView in Flutter (Deutsch)

(23. September 2020)

ListWheelScrollView

ListWheelScrollView

ist ein Flatter-Widget, mit dem ListView mit 3D- Effekt. Dieses Widget ähnelt einer ListView, aber ListWheelScrollView fügt seine untergeordneten Elemente in einem scrollbaren Rad hinzu. Dies führt zu einem 3D-Effekt, als würden sich die Kinder in einem Rad drehen.

Grundlegende Verwendung
Es sind zwei Parameter erforderlich:
children ( List ) und itemExtent ( double ). Die untergeordneten Elemente, die das Listenelement darstellen, werden an einen Delegaten übergeben und während des Layouts träge erstellt. Mit der Eigenschaft itemExtent wird die Größe jedes Elements auf der Hauptachse festgelegt.

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

Dies ist das Verhältnis des Durchmessers des Zylinders zur Größe des Rendering-Fensters der Hauptachse Der Standardwert ist 2 . Wenn er vertikal ist, entspricht die Größe des Hauptachsen-Rendering-Fensters der Höhe von ListWheelScrollView. Je kleiner das Durchmesserverhältnis ist, desto runder ist der Zylinder.

diameterRatio: 1

offAxisFraction

Zeigt den Grad der horizontalen Abweichung des Rads von der Mitte an.

offAxisFraction: -1.5

Sehen wir uns die Auswirkungen dieser Eigenschaft an

Lupe

useMagnifier : Vergrößerung für die zentrale (aktuell ausgewählte)
magnification: Stellen Sie die vergrößerte Größe (Vergrößerungswert)

Verwenden Sie useMagnifier mit magnification , um einen Lupeneffekt zu erzielen

useMagnifier: true,
magnification: 1.5,
Result of useMagnifier und Vergrößerung

onSelectedItemChanged

Das ausgewählte Element befindet sich derzeit in der Mitte des Rads. Es wird jedes Mal geändert, wenn der Benutzer nach oben / unten scrollt. Um den Index des ausgewählten Elements abzurufen, können Sie eine Rückruffunktion als onSelectedItemChanged -Eigenschaft übergeben. Es ist vom Typ, der einen ganzzahligen Parameter akzeptiert.

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

useDelegate

Es gibt eine andere Möglichkeit, eine ListWheelScrollView mithilfe des benannten Konstruktors .useDelegate() zu erstellen Um children zu übergeben, müssen Sie eine ListWheelChildDelegate übergeben, um die untergeordneten Elemente zu erstellen.

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

Die offizielle Dokumentation von ListWheelScrollView finden Sie hier , um weitere Eigenschaften zu erkunden.

Wenn Sie diesen Artikel nützlich finden, klatschen Sie.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.