Flutter下拉刷新、上拉加载

下拉刷新

• 使用RefreshIndicator

• 在onRefresh配置请求接口的方法

RefreshIndicator(
  // fetchData 请求数据
  onRefresh: this.fetchData,
  child: ListView.builder(
    itemCount: this.modules.length,
    itemBuilder: (context, index) {
      return this.buildModule(context, this.modules[index]);
    }
  ),
)

上拉加载

• 使用ScrollController实现上拉加载更多数据

• 监听滚动条滚动事件，需要请求数据时，手动调用请求数据方法

// ...
class LoadDataPage extends StatefulWidget {
  final Map arguments;
  LoadDataPage({Key key, this.arguments}) : super(key: key);

  @override
  _LoadDataPageState createState() => _LoadDataPageState();
}

class _LoadDataPageState extends State<LoadDataPage> {
  // 配置上拉加载更多
  ScrollController _scrollController = new ScrollController();
  // 分页
  int _page = 1;
  // 每一页有多少条数据
  int _pageSize = 10;
  // 数据列表
  List _list = [];
  // 是否还有数据
  bool _hasData = true;

  @override
  void initState() {
    super.initState();
    _getListData();
    // 监听滚动条滚动事件
    _scrollController.addListener(() {
      // _scrollController.position.pixels // 获取滚动条滚动高度
      // _scrollController.position.maxScrollExtent  // 获取页面滚动高度
      if(_scrollController.position.pixels > _scrollController.position.maxScrollExtent - 20) {
        if(this.flag && this._hasMore) {
          _getListData();
        }
      }
    });
  }

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

  // 获取商品列表的数据
  _getProductListData() async {
    setState(() {
      this.flag = false;
    });
    // 调用请求数据接口 - 根据实际情况来
    var result = await Dio().get(api);
    var list = ListModel.fromJson(result.data);
    if(list.result.length < this._pageSize) {
      setState(() {
        this._list.addAll(list.result);
        this._hasMore = false;
        this.flag = true;
      });
    } else {
      setState(() {
        this._list.addAll(list.result);
        this._page++;
        this.flag = true;
      });
    }

    // 判断是否有搜索的数据
    if(list.result.length == 0) {
      setState(() {
        this._hasData = false;
      });
    } else {
      setState(() {
        this._hasData = true;
      });
    }
  }

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

  // 显示加载中的圈圈
  Widget _showMore(index) {
    if(this._hasMore) {
      return (index == this._productList.length - 1) ? this._loadingWidget() : Text('');
    } else {
      return (index == this._productList.length - 1) ? Text('---暂无其他数据了---') : Text('');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: this._scrollController,
      itemCount: this._list.length,
      itemBuilder: (context, index) {
        return Column(
          children: <Widget>[
            // 这里是列表数据展示
            Divider(height: 20,),
            this._showMore(index)
          ],
        );
      }
    );
  }
}