RefreshIndicator FlutterSDK提供的下拉刷新组件,但是没有上拉加载,需要上拉加载可查看 下拉刷新上拉加载Demo。
大家知道,所有的Scrollable都是可滚动的,但是如果没有足够内容,Scrollable是不可滚动的。Scrollable不可滚动时RefreshIndicator下拉功能不可用。这时官方告诉我们要将Scrollable的physics属性设置为AlwaysScrollableScrollPhysics。
参数详解
属性 | 说明 |
child | 子组件 |
displacement | 下拉距离,根据这个距离判定刷新执行。默认40.0 |
onRefresh | 下拉监听 |
color | 刷新进度指示器的前景色 |
backgroundColor | 刷新进度指示器的背景色 |
notificationPredicate | 是否应处理滚动通知的检查(是否通知下拉刷新动作) |
semanticsLabel | 标记此进度指示器(未知作用) |
semanticsValue | 此进度指示器的值(未知作用) |
代码示例
class _MyHomeState extends State<MyHome> {
//数据列表
List list = new List();
int x = 0;
// 初始化数据
@override
void initState() {
super.initState();
getData('初始化数据');
}
/*
* 获取数据
*/
Future getData(String s) async {
await Future.delayed(Duration(seconds: 2), () {
setState(() {
list = List.generate(20, (i) => '$s $i');
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('RefreshIndicator 下拉刷新'),),
body: RefreshIndicator(
child:ListView.builder(
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(this.list[index]),
);
},
),
onRefresh:_onRefresh,
// displacement:30,
color:Colors.red,
backgroundColor:Colors.green,
// notificationPredicate:,
semanticsLabel:'哈哈',
semanticsValue:'sdfjnlsdjf',
),
);
}
// 下拉监听 处理
Future<Null> _onRefresh() async {
x++;
await Future.delayed(Duration(seconds: 3), () {
print('refresh');
setState(() {
list = List.generate(20, (i) => '第 $x 次刷新后数据 $i');
});
});
}
}