为了账号安全,请及时绑定邮箱和手机立即绑定

Flutter 21: 图解 ListView 下拉刷新与上拉加载 (三)【RefreshIndicator】

2018.11.22 13:09 2483浏览

小菜前段时间整理了两种 ListView 的异步加载数据时,下拉刷新与上滑加载更多的方式,每种方式都有自己的优势,网上也有很多大神讲解过 ListView 数据流的种种处理方式,小菜根据实际遇到的情况整理一下尝试的第三种方案。

RefreshIndicator 下拉刷新

      Flutter 提供了自带刷新效果的 RefreshIndicator,这也是网上大神们用的最多的 Widget 之一,使用方式也很简单,RefreshIndicator 中提供了一个刷新的回调入口 onRefresh,仅需在该回调接口中处理数据请求即可,如下:

// 刷新时数据请求Future<Null> _loadRefresh() async {
  await Future.delayed(Duration(seconds: 2), () {
    setState(() {
      dataItems.clear();
      lastFileID = '0';
      rowNumber = 0;
      _getNewsData(lastFileID, rowNumber);      return null;
    });
  });
}// 请求接口整合数据_getNewsData(var lastID, var rowNum) async {
  await http
      .get(      'https://XXX.../getArticles?...&lastFileID=${lastID}&rowNumber=${rowNum}')
      .then((response) {    if (response.statusCode == 200) {      var jsonRes = json.decode(response.body);
      newsListBean = NewsListBean(jsonRes);      if (lastID == '0' && rowNum == 0 && dataItems != null) {
        dataItems.clear();
      }
      setState(() {        if (newsListBean != null &&
            newsListBean.list != null &&
            newsListBean.list.length > 0) {          for (int i = 0; i < newsListBean.list.length; i++) {
            dataItems.add(newsListBean.list[i]);
          }
          lastFileID = newsListBean.list[newsListBean.list.length - 1].fileID.toString();
          rowNumber += newsListBean.list.length;
        } else {}
      });
    }
  });
}// 绑定列表数据@override
Widget build(BuildContext context) {  return Scaffold(
    appBar: AppBar(
      title: Text("第三种加载方式"),
    ),
    body: new RefreshIndicator(
      child: ListView.builder(
        itemCount: items.length,
        itemBuilder: buildListData(context, dataItems[index])
      ),
      onRefresh: _loadRefresh,  // 刷新回调
    ));
}

ScrollController 上滑动加载更多

      至此,列表的下拉刷新就完成了,接下来处理【上滑加载更多】,这时我们可以借助 ScrollController,用来监听列表是否滑动到底部,主要分两步:

  1. 初始化时添加监听事件,判断是否滑动到最底部;

  2. ListView 中添加监听方法。

ScrollController _scrollController = new ScrollController();@overridevoid initState() {  super.initState();
  _scrollController.addListener(() {    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      _getMoreData();  // 当滑到最底部时调用
    }
  });
  _getMoreData();  // 数据初始化}@overrideWidget build(BuildContext context) {  return Scaffold(
      appBar: AppBar(
        title: Text("第三种加载方式"),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: buildListData(context, dataItems[index]),
        controller: _scrollController,
      ));
}



作者:阿策神奇
链接:https://www.jianshu.com/p/8c47517b96d0


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消