Flutter中ListView使用有四种方法,我们如何在使用时选择合适的方法,
1.ListView构造器适用于少量的列表项,由于在初始化时所有的类别表项都实例化了,不管可见不可见的。
2. ListView.builder可以用较多的列表项,每次只会实例化可见的列列表项。
3. ListView.separated可以构建多个列别项,通过separatorBuilder可以设置分割线。
4. ListView.custom创建一个自定义可滚动的小组件。
分别为:
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,
}) : childrenDelegate = SliverChildListDelegate(
children,
addAutomaticKeepAlives: addAutomaticKeepAlives,
addRepaintBoundaries: addRepaintBoundaries,
addSemanticIndexes: addSemanticIndexes,
), super(
key: key,
scrollDirection: scrollDirection,
reverse: reverse,
controller: controller,
primary: primary,
physics: physics,
shrinkWrap: shrinkWrap,
padding: padding,
cacheExtent: cacheExtent,
semanticChildCount: semanticChildCount ?? children.length,
);
ListView.builder({
Key key,
Axis scrollDirection = Axis.vertical,//滚动方向,纵向或者横向
bool reverse = false,//反转
ScrollController controller,//
bool primary,//
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
int semanticChildCount,
}) : childrenDelegate = SliverChildBuilderDelegate(
itemBuilder,
childCount: itemCount,
addAutomaticKeepAlives: addAutomaticKeepAlives,
addRepaintBoundaries: addRepaintBoundaries,
addSemanticIndexes: addSemanticIndexes,
), super(
key: key,
scrollDirection: scrollDirection,
reverse: reverse,
controller: controller,
primary: primary,
physics: physics,
shrinkWrap: shrinkWrap,
padding: padding,
cacheExtent: cacheExtent,
semanticChildCount: semanticChildCount ?? itemCount,
);
const ListView.custom({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
@required this.childrenDelegate,
double cacheExtent,
int semanticChildCount,
}) : assert(childrenDelegate != null),
super(
key: key,
scrollDirection: scrollDirection,
reverse: reverse,
controller: controller,
primary: primary,
physics: physics,
shrinkWrap: shrinkWrap,
padding: padding,
cacheExtent: cacheExtent,
semanticChildCount: semanticChildCount,
);
ListView.separated({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required IndexedWidgetBuilder itemBuilder,
@required IndexedWidgetBuilder separatorBuilder,
@required int itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
}) : assert(itemBuilder != null),
assert(separatorBuilder != null),
assert(itemCount != null && itemCount >= 0),
itemExtent = null,
childrenDelegate = SliverChildBuilderDelegate(
(BuildContext context, int index) {
final int itemIndex = index ~/ 2;
Widget widget;
if (index.isEven) {
widget = itemBuilder(context, itemIndex);
} else {
widget = separatorBuilder(context, itemIndex);
assert(() {
if (widget == null) {
throw FlutterError('separatorBuilder cannot return null.');
}
return true;
}());
}
return widget;
},
childCount: _computeSemanticChildCount(itemCount),
addAutomaticKeepAlives: addAutomaticKeepAlives,
addRepaintBoundaries: addRepaintBoundaries,
addSemanticIndexes: addSemanticIndexes,
semanticIndexCallback: (Widget _, int index) {
return index.isEven ? index ~/ 2 : null;
}
), super(
key: key,
scrollDirection: scrollDirection,
reverse: reverse,
controller: controller,
primary: primary,
physics: physics,
shrinkWrap: shrinkWrap,
padding: padding,
cacheExtent: cacheExtent,
semanticChildCount: _computeSemanticChildCount(itemCount),
);
controller参数,我们可以设置加载更多,对于加载更多,我们可以使用RefreshIndicator,在onrefresh中设置刷新操作。
class TestWidge extends StatefulWidget {
@override
TestListViewWidge createState() => TestListViewWidge();
}
class TestListViewWidge extends State<StatefulWidget> {
List<int> _list = new List<int>();
ScrollController _scrollController = new ScrollController();
@override
void initState() {
// TODO: implement initState
super.initState();
_list = List.generate(10, (i) => i);
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
_pullRefresh();
}
});
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_scrollController.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: RefreshIndicator(
child: ListView.builder(
itemCount: _list.length,
controller: _scrollController,
itemBuilder: (BuildContext context, int index) {
return Card(
color: Colors.green,
child: new Padding(
padding: EdgeInsets.all(40.0),
child: Text("Hello world" + _list[index].toString()),
)
);
},
),
onRefresh: _refresh,
),
);
}
Future<Null> _pullRefresh() async {
setState(() {
_list.add(10);
_list.add(11);
});
return;
}
Future<Null> _refresh() async {
setState(() {
_list.clear();
_list.add(20);
_list.add(21);
_list.add(22);
_list.add(20);
_list.add(21);
_list.add(22);
_list.add(20);
_list.add(21);
_list.add(22);
});
return;
}
}
状态 | 显示图 |
---|---|
源数据 | |
下拉刷新 | |
加载 |