美文网首页Flutter
Flutter上拉加载下拉刷新---flutter_easyre

Flutter上拉加载下拉刷新---flutter_easyre

作者: KnoYo | 来源:发表于2018-12-19 12:59 被阅读660次

    前言

    Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式。Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色的动画效果,并且对自定义支持非常好。接下来给大家介绍的就是,Flutter版本的刷新UI库---flutter_easyrefresh,在功能方面已经很接近Android的SmartRefreshLayout。

    Github地址:flutter_easyrefresh

    介绍

    正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件,但前提是需要包裹成ScrollView。它的功能与Android的SmartRefreshLayout很相似,同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer,但是它并没有局限性,你可以很轻松的自定义。使用Flutter强大的动画,甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大,稳定,成熟的下拉刷新框架。

    特点功能:

    • 支持Andorid(光晕),ios(越界回弹)效果
    • 支持任意的ScrollView控件,如果不是进行简单封装即可(所以理论是所有控件)
    • 支持自定义并且已经集成了很多炫酷的 Header 和 Footer
    • 支持下拉刷新、上拉加载(可自动)
    • 支持 Header 和 Footer 列表嵌入以及视图浮动两种形式

    传送门

    Demo

    下载 APK-Demo

    ApkDemo二维码

    项目演示

    基本样式 自动加载
    BasicPage AutoLoadPage
    浮动效果 个人中心
    FloatPage UserProfilePage

    样式演示

    Material BallPulse
    MaterialPage BallPulsePage
    BezierCircle BezierHourGlass
    BezierCirclePage BezierHourGlassPage

    简单用例

    1.在 pubspec.yaml 中添加依赖

    //pub方式
    dependencies:
      flutter_easyrefresh: ^1.0.1
    
    //导入方式
    dependencies:
      flutter_easyrefresh:
        path: 项目路径
    

    2.在布局文件中添加 EasyreFresh

    import 'package:flutter_easyrefresh/easy_refresh.dart';
    ....
      GlobalKey<EasyRefreshState> _easyRefreshKey = new GlobalKey<EasyRefreshState>();
    ....
      new EasyRefresh(
        key: _easyRefreshKey,
        child: ScrollView(),
        onRefresh: () async{
          ....
        },
        loadMore: () async {
          ....
        },
      )
    

    3.触发刷新和加载动作

      // 如果不需要可以不用设置EasyRefresh的key
      _easyRefreshKey.currentState.callRefresh();
      _easyRefreshKey.currentState.callLoadMore();
    

    使用指定的 Header 和 Footer

    import 'package:flutter_easyrefresh/easy_refresh.dart';
    ....
      GlobalKey<RefreshHeaderState> _headerKey = new GlobalKey<RefreshHeaderState>();
      GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>();
    ....
      // 因为EasyRefresh会对Header和Footer进行更新,为了与用户保持统一的操作状态,必须设置key
      // 不同的Header和Footer可能有不同的参数设置
      new EasyRefresh(
        refreshHeader: MaterialHeader(
            key: _headerKey,
        ),
        refreshFooter: MaterialFooter(
            key: _footerKey,
        ),
        child: ScrollView(),
        ....
      )
    

    QQ讨论群 - 554981921

    进群须知

    这个群不仅仅是解决EasyreFresh的问题,任何Flutter相关的问题都可以进行讨论。正如它的名字一样,有问必答,只要群主有时间,都会帮大家一起解决问题。

    相关文章

      网友评论

        本文标题:Flutter上拉加载下拉刷新---flutter_easyre

        本文链接:https://www.haomeiwen.com/subject/kgtjkqtx.html