您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-27(Flutter 新下拉刷新上拉分页加载更多)

2020-04-30【Flutter】1749人已围观

简介一、Flutter 下拉刷新和上拉分页在 Flutter 官方 sdk 中给我们提供了下拉刷新的组件 RefreshIndicator 。但是没有提供上拉分页加载更多的组件。但是在 Flutter ListView 中有一个 ScrollController 属性，它就是专门来控制 ListView 滑动事件，在这里我们可以根据 ListView 的位置来判断是否滑动到了底部来做加载更多的处理。

## 一、Flutter  下拉刷新和上拉分页

在 `Flutter` 官方 `sdk` 中给我们提供了下拉刷新的组件 `RefreshIndicator` 。但是
没有提供上拉分页加载更多的组件。但是在 `Flutter ListView` 中有一个
`ScrollController` 属性，它就是专门来控制 `ListView` 滑动事件，在这里我们可
以根据 `ListView` 的位置来判断是否滑动到了底部来做加载更多的处理。

[Api 接口：
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1](http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1)

## 二、Flutter 上拉刷新 RefreshIndicator 组件

> 使用 `RefreshIndicator` 包裹组件，调用 `onRefresh` 事件来监听

```
RefreshIndicator(
  onRefresh: _onRefresh,
  child: ListView.builder(
    itemCount: this._list.length,
    itemBuilder: (context,index){
      return ListTile(
        title: Text(this._list[index]["title"]),
      );
    },
  ),
)

//------------------------//

//下拉刷新
  Future<void> _onRefresh() async {
    await Future.delayed(Duration(milliseconds: 2000), () {
      print('请求数据完成');
      _getData();
    });
  }
```

## 下拉分页

1. `class` 里面定义 `ScrollController _scrollController = new ScrollController();`
2. `_scrollController.position.pixels` 滚动的距离
3. `_scrollController.position.maxScrollExtent` 总距离
4. 在 `initState` 初始化中判断相等时，就滑到了最底部

**核心代码**

```
ListView.builder(
  controller: _scrollController,// 监听滚动条事件
  itemCount: this._list.length,// 总条数
  itemBuilder: (context,index){
    if(index == _list.length - 1){ // 列表渲染到最后一条,出现加载圈圈，数据展示完显示---底线
      if(hasMore == false){ // 没有数据的时候
        return Center(
          child: Text("--------我是有底线的--------"),
        );
      } else{
        return Column( // 当期分页完成时
          children: <Widget>[
            ListTile(
              title: Text(_list[index]["title"]),
            ),
            Divider(),
            _getMoreWidget()
          ],
        );
      }
    } else {
      return Column(
        children: <Widget>[
          ListTile(
            title: Text(_list[index]["title"]),
          ),
          Divider(),
        ],
      );
    }
  },
),
```

> 完整代码

```
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'dart:convert';

class RefreshDemoPage extends StatefulWidget {
  RefreshDemoPage({Key key}) : super(key: key);
  _RefreshDemoPageState createState() => _RefreshDemoPageState();
}

class _RefreshDemoPageState extends State<RefreshDemoPage> {
  List _list = [];
  int _page = 1;
  bool hasMore = true; //判断有没有数据
  ScrollController _scrollController = new ScrollController();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getData();

//监听滚动条事件
    _scrollController.addListener(() {
      print(_scrollController.position.pixels); //获取滚动条下拉的距离
      print(_scrollController.position.maxScrollExtent); //获取整个页面的高度
      if (_scrollController.position.pixels >
          _scrollController.position.maxScrollExtent - 40) {
        this._getData();
      }
    });
  }
  // 获取数据
  _getData() async{
    if(hasMore){
      Response response = await Dio().get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=${this._page}");
      var res = json.decode(response.data)["result"];
      setState(() {
        this._list.addAll(res);
        this._page++;
      });
      //判断是否是最后一页,注意是res 不是 _list长度
      if (res.length == 0) {
        setState(() {
          this.hasMore = false;
        });
      }
    }
  }
  //上拉刷新
  Future<void> _onRefresh() async {
    await Future.delayed(Duration(milliseconds: 2000), () {
      print('请求数据完成');
      _getData();
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("下拉刷新，上拉分页 Demo"),
        ),
        body: _list.length > 0 ? RefreshIndicator(
          onRefresh: _onRefresh,
          child: ListView.builder(
            controller: _scrollController,// 监听滚动条事件
            itemCount: this._list.length,// 总条数
            itemBuilder: (context,index){
              if(index == _list.length - 1){ // 列表渲染到最后一条,出现加载圈圈，数据展示完显示---底线
                if(hasMore == false){ // 没有数据的时候
                  return Center(
                    child: Text("--------我是有底线的--------"),
                  );
                } else{
                  if(_page == 2 && _cateData.length < _pageSize){// 防止第一页就加载完数据而一直显示加载中
                      return Column( // 当期分页完成时
                        children: <Widget>[
                          _listWidget2(index, img),
                          Divider(height: S.height(40),),
                          Text("--------我是有底线的--------"),
                        ],
                      );
                    } else {
                      return Column( // 当期分页完成时
                        children: <Widget>[
                          _listWidget2(index, img),
                          Divider(height: S.height(40),),
                          LoadingWidget(),
                        ],
                      );
                    }
                }
              } else {
                return Column(
                  children: <Widget>[
                    ListTile(
                      title: Text(_list[index]["title"]),
                    ),
                    Divider(),
                  ],
                );
              }
            },
          ),
        ) : _getMoreWidget(),
    );
  }

//加载中的圈圈
  Widget _getMoreWidget() {

return Center(
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              '加载中...',
              style: TextStyle(fontSize: 16.0),
            ),
            CircularProgressIndicator(
              strokeWidth: 1.0,
            )
          ],
        ),
      ),
    );
    }
}
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-26(Dio 求库实现网络请求 get post put delete 以及动态渲染数据)

下一篇：flutter-28(实现简单的新闻系统渲染新闻详情数据以及用用flutter_html 解析析html)