Flutter ListView 上拉加载更多下拉刷新功能实现方法

 更新时间:2019年07月22日 10:02:30   作者:朋也  
这篇文章主要介绍了Flutter ListView 上拉加载更多下拉刷新功能实现方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

先上图

下拉刷新

跟原生开发一样,下拉刷新在flutter里提供的有组件实现 RefreshIndicator

一直不明白为啥组件中都提供下拉刷新,但就是没有上拉加载!!

我这请求接口数据用的是 http 库,是个第三方的是需要安装的 https://pub.dev/packages/http

用法如下

class MyHomePage extends StatefulWidget {
 MyHomePage({Key key}) : super(key: key);
 @override
 MyHomeWidget2 createState() => MyHomeWidget2();
}
class MyHomeWidget2 extends State<MyHomePage> {
 int page = 1;
 List data = new List();
 var baseUrl = "https://cnodejs.org/api/v1";
 @override
 void initState() {
 super.initState();
 this._onRefresh();
 }
 _fetchData() async {
 var response = await http.get(
  '${this.baseUrl}/topics?mdrender=false&limit=10&page=${this.page}');
 var json = await convert.jsonDecode(response.body);
 return json['data'];
 }
 Future<dynamic> _onRefresh() {
 data.clear();
 this.page = 1;
 return _fetchData().then((data) {
  setState(() => this.data.addAll(data));
 });
 }
 @override
 Widget build(BuildContext context) {
 return Scaffold(
  body: RefreshIndicator( // 在ListView外包一层 RefreshIndicator 组件
  onRefresh: _onRefresh, // 添加onRefresh方法
  child: ListView.separated(
   itemCount: this.data.length,
   itemBuilder: (context, index) {
   var _data = this.data[index];
   return ListTile(
    leading: Image.network(_data["author"]["avatar_url"]),
    title: Text(_data["title"]),
    subtitle: Text(_data["author"]["loginname"] +
     " created at " +
     new DateTime.now().toString()), // 为了看每次数据变动,这里直接取当前时间
    trailing: Icon(Icons.chevron_right));
   },
   separatorBuilder: (context, index) {
   return Divider();
   },
  )
 ));
 }
}

链接文原: https://tomoya92.github.io/2019/07/17/flutter-refresh-loadmore/

上拉加载

上拉加载原理还是一样的,给ListView加一个 ScrollController 组件,然后通过事件监听滚动条的高度来显示和隐藏加载更多的组件

先将加载更多的组件写好

Widget _loadMoreWidget() {
 return new Padding(
 padding: const EdgeInsets.all(15.0), // 外边距
 child: new Center(
  child: new CircularProgressIndicator()
 ),
 );
}

初始化一个 ScrollController 组件,将其设置给 ListView 组件的 controller 属性上

ScrollController _scrollController = new ScrollController();

child: ListView.separated(
 controller: _scrollController,
 //...
)

然后通过重写 dispost() 方法来处理加载更多组件的释放

@override
void dispose() {
 _scrollController.dispose();
 super.dispose();
}

最后通过数据源来控制界面渲染哪个组件,当数据源循环渲染的 index 跟数据源一样长时(其实少1,下标从0开始的)就渲染加载更多组件,让其显示出来,同时调用加载更多方法,获取数据,再通过state实现组件ui的更新

完整代码如下

class MyHomePage extends StatefulWidget {
 MyHomePage({Key key}) : super(key: key);
 @override
 MyHomeWidget2 createState() => MyHomeWidget2();
}
class MyHomeWidget2 extends State<MyHomePage> {
 int page = 1;
 bool isLoadmore = false;
 List data = new List();
 var baseUrl = "https://cnodejs.org/api/v1";
 ScrollController _scrollController = new ScrollController();
 @override
 void initState() {
 super.initState();
 this._onRefresh();
 _scrollController.addListener(() {
  if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
  _onLoadmore();
  }
 });
 }
 _fetchData() async {
 var response = await http.get(
  '${this.baseUrl}/topics?mdrender=false&limit=10&page=${this.page}');
 var json = await convert.jsonDecode(response.body);
 return json['data'];
 }
 Future<dynamic> _onRefresh() {
 data.clear();
 this.page = 1;
 return _fetchData().then((data) {
  setState(() => this.data.addAll(data));
 });
 }
 Future<dynamic> _onLoadmore() {
 this.page++;
 return _fetchData().then((data) {
  setState((){
  this.data.addAll(data);
  isLoadmore = false;
  });
 });
 }
 @override
 void dispose() {
 _scrollController.dispose();
 super.dispose();
 }
 Widget _loadMoreWidget() {
 return new Padding(
  padding: const EdgeInsets.all(15.0),
  child: new Center(
  child: new CircularProgressIndicator()
  ),
 );
 }
 @override
 Widget build(BuildContext context) {
 return Scaffold(
  body: RefreshIndicator(
  onRefresh: _onRefresh,
  child: ListView.separated(
   controller: _scrollController,
   itemCount: this.data.length,
   itemBuilder: (context, index) {
   if (index == data.length - 1) {
    return _loadMoreWidget();
   } else {
    var _data = this.data[index];
    return ListTile(
     leading: Image.network(_data["author"]["avatar_url"]),
     title: Text(_data["title"]),
     subtitle: Text(_data["author"]["loginname"] +
      " created at " +
      new DateTime.now().toString()),
     trailing: Icon(Icons.chevron_right));
   }
   },
   separatorBuilder: (context, index) {
   return Divider();
   },
  )
 ));
 }
}

总结

以上所述是小编给大家介绍的Flutter ListView 上拉加载更多下拉刷新功能实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • springboot 多数据源配置不生效遇到的坑及解决

    springboot 多数据源配置不生效遇到的坑及解决

    这篇文章主要介绍了springboot 多数据源配置不生效遇到的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-11-11
  • 基于SqlSessionFactory的openSession方法使用

    基于SqlSessionFactory的openSession方法使用

    这篇文章主要介绍了SqlSessionFactory的openSession方法使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-12-12
  • SpringMVC使用ResponseEntity实现文件上传下载

    SpringMVC使用ResponseEntity实现文件上传下载

    这篇文章主要为大家介绍了SpringMVC使用ResponseEntity实现文件上传下载,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • Maven打包jar(lib目录分离和不分离)的两种方式

    Maven打包jar(lib目录分离和不分离)的两种方式

    打包jar的方式有很多种,本文主要介绍了Maven打包jar的两种方式,包含lib目录分离和不分离,具有一定的参考价值,感兴趣的可以了解一下
    2024-07-07
  • 批量上传Jar包到Maven私服的工具的方法

    批量上传Jar包到Maven私服的工具的方法

    这篇文章主要介绍了批量上传Jar包到Maven私服的工具的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • MySqlConnector的使用教程

    MySqlConnector的使用教程

    本文详细介绍了MySqlConnector的核心功能,包括数据变更捕获、KafkaConnect兼容性、配置管理、版本信息、连接器任务创建、配置验证、数据库连接建立和连接器配置创建等,感兴趣的可以了解一下
    2024-10-10
  • 10分钟带你徒手写个Java线程池

    10分钟带你徒手写个Java线程池

    我们自己手动实现的线程池要比Java自身的线程池简单的多,我们去掉了各种复杂的处理方式,只保留了最核心的原理,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-04-04
  • 解决Error:(1, 1) java: 非法字符: '\ufeff'问题

    解决Error:(1, 1) java: 非法字符: '\ufeff'问题

    这篇文章主要介绍了解决Error:(1, 1) java: 非法字符: '\ufeff'问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Java之CountDownLatch原理全面解析

    Java之CountDownLatch原理全面解析

    这篇文章主要介绍了Java之CountDownLatch原理解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Spring Boot集成FreeMarker 时访问不到.ftl文件的配置步骤

    Spring Boot集成FreeMarker 时访问不到.ftl文件的配置步骤

    Spring Boot 要集成 FreeMarker 模板引擎时必须经过正确的配置,大致可分为5 个步骤,下面分步骤给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-04-04

最新评论