flutter怎么手动刷新_Flutter 实现上拉加载更多、下拉刷新

下拉刷新

上拉加载更多

实现分析

下拉刷新

下拉刷新使用的是 RefreshIndicator组件来实现，使用伪代码如下：@override

Widget build(BuildContext context) {    return new Scaffold(

body: new RefreshIndicator(

onRefresh: _handleRefresh,

));

}

在body中添加RefreshIndicator 组件，在 onRefresh中实现下拉刷新的操作，这里的_handleRefresh方法代码如下：Future  _handleRefresh() async {    // 延迟3秒后添加新数据， 模拟网络加载

await Future.delayed(Duration(seconds: 3), () {

setState(() {

_suggestions.clear();

_suggestions.addAll(generateWordPairs().take(20));        return _suggestions;

});

});

}

上拉加载更多

加载更多的组件在Flutter中是没有提供的，所以我们只能自己实现，在以前Android 中上拉加载更多可以通过监听滑动来实现，这里应该也是可以这么操作的。

Flutter的ListView中有一个ScrollController属性，通过监听这个滑动来实现加载更多。

实现步骤如下：定义ScrollController _scrollController = new ScrollController();

在 ListView 的列表中添加controller: _scrollController,// listView 列表

Widget _buildSuggestions() {    return new ListView.builder(

padding: const EdgeInsets.all(16.0),

itemCount: _suggestions.length + 1,

itemBuilder: (context, i) {        // 在每一列之前，添加一个1像素高的分隔线widget

if (i.isOdd) return new Divider();        // 最后一个单词对

if (i == _suggestions.length) {          return _buildLoadMore();

} else {          return _buildRow(_suggestions[i]);

}

},

controller: _scrollController,

);在 initState()方法中监听滑动，如果滑动到最后则获取加载更多的数据@override

void initState() {    super.initState();

_suggestions.addAll(generateWordPairs().take(20));

_scrollController.addListener(() {      if (_scrollController.position.pixels ==

_scrollController.position.maxScrollExtent) {

_getMoreData();

}

});

}

_getMorData方法实现如下：// 加载更多

Future _getMoreData() async {    await Future.delayed(Duration(seconds: 3), () {

setState(() {        // 这里是本地数据，因此在无网的时候也会加载数据

_suggestions.addAll(generateWordPairs().take(10));        return _suggestions;

});

});

}

至此，下拉刷新和上拉加载就实现完成了，欢迎大家一起交流，共同进步。

作者：_龙衣

链接：https://www.jianshu.com/p/0101e821aa11