在Flutter开发之ListView使用第三方pull_to_refresh加载更多(36) 中我们实现了下拉刷新、上拉分页加载的功能。今天介绍另一个ListView使用第三方flutter_refresh
来实现下拉刷新、上拉分页加载。
添加 flutter_refresh
依赖
官方文档:https://pub.flutter-io.cn/packages/flutter_refresh#-installing-tab-
我们可以通过pubspec.yaml文件引入最新版本
dependencies:
pull_to_refresh: ^1.5.0
导入
import 'package:pull_to_refresh/pull_to_refresh.dart';
使用示例
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'dart:async';
import 'package:flutter_refresh/flutter_refresh.dart';
class ListViewFlutterRefresh extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('flutter_refresh'),
),
body: new MyFlutterRefreshPage(title: 'Pull to refresh'),
);
}
}
class MyFlutterRefreshPage extends StatefulWidget {
MyFlutterRefreshPage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyFlutterRefreshPageState createState() => new _MyFlutterRefreshPageState();
}
class _MyFlutterRefreshPageState extends State<MyFlutterRefreshPage> with TickerProviderStateMixin {
Widget _itemBuilder(BuildContext context, int index) {
return new Padding(
key: new Key(index.toString()),
padding: new EdgeInsets.all(10.0),
child: Text(
"顺序数据:$index",
style: TextStyle(fontSize: 14.0),
),
);
}
int _itemCount;
@override
void initState() {
_itemCount = 10;
super.initState();
}
Future<Null> onFooterRefresh() {
return new Future.delayed(new Duration(seconds: 2), () {
setState(() {
_itemCount += 10;
});
});
}
Future<Null> onHeaderRefresh() {
return new Future.delayed(new Duration(seconds: 2), () {
setState(() {
_itemCount = 10;
});
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: SafeArea(
child: Refresh(
onFooterRefresh: onFooterRefresh,
onHeaderRefresh: onHeaderRefresh,
childBuilder: (BuildContext context,
{ScrollController controller, ScrollPhysics physics})
{
return Container(
child: ListView.builder(
physics: physics,
controller: controller,
itemBuilder: _itemBuilder,
itemCount: _itemCount,
));
},
)
)
);
}
}
效果图下:
综述:这个效果比较符合通用的样式。并且使用也很简单。推荐使用。
翻译来源:
https://pub.flutter-io.cn/packages/flutter_refresh#-readme-tab-