Einführung
Listview ist eine der am häufigsten verwendeten Scroll-Komponenten im Flattermodus, mit der die lineare Anordnung mehrerer Unterkomponenten in einer Richtung problemlos realisiert werden kann. Werfen wir einen Blick auf den Standardkonstruktor:
ListView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior = Clip.hardEdge,
})
- scrollDirection : Die Richtung des Listenscrollens. Optional stehen Axis.vertical und Axis.horizontal für vertikales und horizontales Gleiten. Der Standardwert ist vertikal.
- reverse : Gibt an, ob die Anzeige in umgekehrter Reihenfolge erfolgen soll. Die Standardeinstellung ist die Anzeige in Vorwärtsreihenfolge.
- Controller : Der Controller der Listenansicht, mit dem der Gleitstatus überwacht werden kann.
- Physik : Die Physik hat mehrere Möglichkeiten,
| AlwaysScrollableScrollPhysics() | immer swipen |
| NeverScrollableScrollPhysics() | kein Scrollen |
| BounceScrollPhysics() | Der Inhalt überschreitet einen Bildschirm und es entsteht ein Rückpralleffekt, wenn er nach oben gezogen wird |
| ClampingScrollPhysics() | Wickeln Sie den Inhalt ein, es wird kein Snapback geben |
- ShrinkWrap : Ob die Länge der Liste nur die Länge ihres Inhalts umschließt, der Standardwert ist false. Beachten Sie, dass die Listenansicht auf „true“ gesetzt werden muss, wenn sie in einer Komponente mit unbestimmter Länge enthalten ist, andernfalls wird ein Fehler gemeldet.
- Kinder : Ein Array von Komponenten, die untergeordnete Elemente speichern.
Eine kurze Einführung in einige häufig verwendete Parameter. Werfen wir einen Blick auf die häufig verwendeten Methoden.
Standardkonstruktor
Die untergeordneten Elemente des Standardkonstruktors werden direkt in die untergeordnete Liste geschrieben und er akzeptiert Widget. Diese Methode eignet sich besser für Situationen mit weniger Elementen und ist auch für Situationen mit großen Unterschieden bei den Unterelementen sehr nützlich.
ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(20.0),
children: <Widget>[
new Text('item1'),
new Text('item2'),
new Text('item3'),
],
);
ListView.builder
new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return getItem(index);
},
itemCount: data.length,
itemExtent: 50.0, //强制高度为50.0
shrinkWrap: true,
physics: BouncingScrollPhysics(),
)
- itemBuilder : Der Builder des Unterelements, die Parameter umfassen Kontext und Index (die aktuelle Listenposition) und der Rückgabewert ist ein Widget. Wenn die Liste zu einer bestimmten Indexposition scrollt, wird der Builder aufgerufen, um das Listenelement zu erstellen.
- itemCount : Die Anzahl der Unterelemente, hier wird die Länge der Testdaten zurückgegeben. Die Listview-Elemente sind unendlich, wenn dieser Parameter nicht verwendet wird.
Schreiben Sie die initState-Methode neu und fügen Sie Testdaten hinzu:
List data = [];
@override
void initState() {
super.initState();
setState(() {
for (int i = 0; i < 100; i++) {
data.add("item $i");
}
});
}
Dann gibt es die getItem-Methode zum Erstellen von Unterelementen, wobei GestureDetector zur Verarbeitung von Klickereignissen verwendet wird und toast das Paket fluttertoast: ^3.1.3 verwendet.
Widget getItem(int index) {
return new GestureDetector(
onTap: () {
//处理点击事件
showToast(data[index]);
},
child: new Container(
padding: const EdgeInsets.all(14.0),
child: new Text(data[index]),
),
);
}
ListView.separated
Der Hauptunterschied zwischen ListView.separated und ListView.builder besteht darin, dass der obligatorische Parameter „separatorBuilder“ zum Generieren der Trennlinie bereitgestellt wird. Das Beispiel lautet wie folgt:
new ListView.separated(
itemBuilder: (BuildContext context, int index) {
return getItem(index);
},
separatorBuilder: (BuildContext context, int index) {
return new Divider(
endIndent: 50,
height: 1,
thickness: 1,
);
},
itemCount: data.length,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
)
Der Teiler ist die Trennlinie, die Parameter sind
-
Höhe : Die Höhe, die die Trennlinie einnimmt .
-
Dicke : Die Dicke der Trennlinie.
-
Einzug : Die Länge des Leerraums am Anfang und Ende der Trennlinie.
-
endIndent : Die Länge des Leerzeichens am Ende der Trennlinie.
-
Farbe : Die Farbe der Linie.
另外：itemCount在这种模式下是必填参数，与ListView.builder不同。ListView.builder的方式要 添加分割线的话可以在itemBuilder中添加（即添加到子元素中）。
vollständiges Beispiel
Fügen Sie abschließend den vollständigen Beispielcode ein:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() {
runApp(new ListViewApp());
}
class ListViewApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
theme: ThemeData.light(),
home: new ListViewWidget(),
title: "listViewSample",
);
}
}
class ListViewWidget extends StatefulWidget {
@override
ListState createState() => new ListState();
}
class ListState extends State<ListViewWidget> {
List data = [];
@override
void initState() {
super.initState();
setState(() {
for (int i = 0; i < 100; i++) {
data.add("item $i");
}
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.blue,
title: new Center(
child: new Text('listViewTitle'),
),
),
body: new Column(
children: [
new Expanded(
child: new ListView.separated(
itemBuilder: (BuildContext context, int index) {
return getItem(index);
},
separatorBuilder: (BuildContext context, int index) {
return new Divider(
endIndent: 50,
height: 1,
thickness: 1,
);
},
itemCount: data.length,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
)),
],
));
}
Widget getItem(int index) {
return new GestureDetector(
onTap: () {
//处理点击事件
showToast(data[index]);
},
child: new Container(
padding: const EdgeInsets.all(14.0),
child: new Text(data[index]),
),
);
}
void showToast(String toast) {
Fluttertoast.showToast(
msg: toast,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIos: 1,
);
}
}
Laufergebnis:
