[Flutter] 下拉加载更多

下拉加载更多

定义变量

 //定义控制器
final ScrollController _scrollController = ScrollController();
  //存储列表，远程数据的话应先处理数据
  //此处Data类型是List<Map<String,Object>>
  List _list = Data;

初始化和销毁滑动控制器

@override
void initState() {
    super.initState();
    //tabController初始化
    _tabController = TabController(length: 6, vsync: this);
    //监听滚动条事件
    _scrollController.addListener(() {
        if (_scrollController.position.pixels ==
            _scrollController.position.maxScrollExtent) {
            _getMoreData(); //触底触发事件
        }
    });
}

//销毁滑动控制器
@override
void dispose() {
    super.dispose();
    _scrollController.dispose();
}

触底后，往列表里后接数据

//2秒的delay，上拉加载重复数据
_getMoreData() async {
    await Future.delayed(Duration(milliseconds: 2000));
    setState(() {
        //只刷新20条数据，此处为重复数据，分页数据可以根据page页数来加载
        List list = _list.sublist(0, 20);
        list.addAll(_list);
        _list = list;
    });
}

输出数据判断添加加载圈圈

return ListView.builder(
    controller:_scrollController,
    itemCount: _list.length,
    itemBuilder: (context, index) {
        return index == _list.length - 1 ? _loading() : _outPut();//_loading 加载圈圈  _outPut输出组件
    });