flutter_easyrefresh 的使用和noMoreText的问题

行业 归档:201907
普通
浏览:10266
2019-07-31 10:18:54
EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件,但前提是需要包裹成ScrollView。它的功能与Android的SmartRefreshLayout很相似,同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer,但是它并没有局限性,你可以很轻松的自定义

首选感谢作者的无私奉献,项目地址是:

https://github.com/xuelongqy/flutter_easyrefresh

项目介绍:

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

特点:

1. 支持Andorid(光晕),ios(越界回弹)效果
2. 支持绝大多数Widget
3. 支持自定义并且已经集成了很多炫酷的 Header 和 Footer
4. 支持下拉刷新、上拉加载(可自动)
5. 支持 Header 和 Footer 列表嵌入以及视图浮动两种形式
6. 支持列表事件监听,制作任何样子的 Header 和 Footer,并且能够放在任何位置
7. 支持首次刷新,并自定义视图
8. 支持自定义列表为空时的视图,仅限于ScrollView

听闻最近在开发2.0版本,期待能尽快发布。

官方例子:basic_page.dart

https://github.com/xuelongqy/flutter_easyrefresh/blob/master/example/lib/page/sample/basic_page.dart

import 'dart:async';

import 'package:example/generated/translations.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';

/// 基本使用页面
class BasicPage extends StatefulWidget {
  @override
  _BasicPageState createState() => _BasicPageState();
}

class _BasicPageState extends State<BasicPage> {
  List<String> addStr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
  List<String> str = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
  GlobalKey<EasyRefreshState> _easyRefreshKey =
      new GlobalKey<EasyRefreshState>();
  GlobalKey<RefreshHeaderState> _headerKey =
      new GlobalKey<RefreshHeaderState>();
  GlobalKey<RefreshFooterState> _footerKey =
      new GlobalKey<RefreshFooterState>();
  bool _loadMore = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Translations.of(context).text("basicUse")),
      ),
      body: Center(
          child: new EasyRefresh(
        key: _easyRefreshKey,
        behavior: ScrollOverBehavior(),
        refreshHeader: ClassicsHeader(
          key: _headerKey,
          refreshText: Translations.of(context).text("pullToRefresh"),
          refreshReadyText: Translations.of(context).text("releaseToRefresh"),
          refreshingText: Translations.of(context).text("refreshing") + "...",
          refreshedText: Translations.of(context).text("refreshed"),
          moreInfo: Translations.of(context).text("updateAt"),
          bgColor: Colors.transparent,
          textColor: Colors.black87,
          moreInfoColor: Colors.black54,
          showMore: true,
        ),
        refreshFooter: ClassicsFooter(
          key: _footerKey,
          loadText: Translations.of(context).text("pushToLoad"),
          loadReadyText: Translations.of(context).text("releaseToLoad"),
          loadingText: Translations.of(context).text("loading"),
          loadedText: Translations.of(context).text("loaded"),
          noMoreText: Translations.of(context).text("noMore"),
          moreInfo: Translations.of(context).text("updateAt"),
          bgColor: Colors.transparent,
          textColor: Colors.black87,
          moreInfoColor: Colors.black54,
          showMore: true,
        ),
        child: new ListView.builder(
            //ListView的Item
            itemCount: str.length,
            itemBuilder: (BuildContext context, int index) {
              return new Container(
                  height: 70.0,
                  child: Card(
                    child: new Center(
                      child: new Text(
                        str[index],
                        style: new TextStyle(fontSize: 18.0),
                      ),
                    ),
                  ));
            }),
        onRefresh: () async {
          await new Future.delayed(const Duration(seconds: 1), () {
            setState(() {
              str.clear();
              str.addAll(addStr);
              _easyRefreshKey.currentState.waitState(() {
                setState(() {
                  _loadMore = true;
                });
              });
            });
          });
        },
        loadMore: _loadMore
            ? () async {
                await new Future.delayed(const Duration(seconds: 1), () {
                  if (str.length < 20) {
                    setState(() {
                      str.addAll(addStr);
                    });
                  } else {
                    _easyRefreshKey.currentState.waitState(() {
                      setState(() {
                        _loadMore = false;
                      });
                    });
                  }
                });
              }
            : null,
      )),
      persistentFooterButtons: <Widget>[
        FlatButton(
            onPressed: () {
              _easyRefreshKey.currentState.callRefresh();
            },
            child: Text(Translations.of(context).text("refresh"),
                style: TextStyle(color: Colors.black))),
        FlatButton(
            onPressed: () {
              _easyRefreshKey.currentState.callLoadMore();
            },
            child: Text(Translations.of(context).text("loadMore"),
                style: TextStyle(color: Colors.black)))
      ], // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

关于noMoreText的问题

最近在群里,老有群友提到noMoreText显示的问题,即,loadMore()的时候,不论还有没有数据,底部文字总是会显示noMoreText没有更多了,其实只需要注意官方的例子中以下代码:

       loadMore: _loadMore
            ? () async {
                await new Future.delayed(const Duration(seconds: 1), () {
                  if (str.length < 20) {
                    setState(() {
                      str.addAll(addStr);
                    });
                  } else {
                    _easyRefreshKey.currentState.waitState(() {
                      setState(() {
                        _loadMore = false;
                      });
                    });
                  }
                });
              }
            : null,

比如在我的代码中,是这样的:

                onRefresh: () async {
                  await bloc.getArticlePageList();
                },
                loadMore: () async {
                  await bloc.loadMore();
                },

注意 async和await的这个操作即可。

注意事项
  • 此文章对你有帮助,对作者表示感谢(微信):
  • 本文地址:https://22v.net/article/3248/
  • 转载本文时,请注明转载自“SamBlog”的字样。
  • 如此文章有损您的合法权益,请使用页面底部的邮箱与我取得联系。
分类目录
文章归档
友情站点