Flutter ListView 加载更多

Flutter ListView 加载更多

实现功能

• 到底加载
• 防止频繁加载
• 加载进度图标
• 全部展示提示

功能实现

到底加载

在initState()中加入

 @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      	 //TODO 到底部触发的行为
      }
    });
  }

防止网络频繁加载

在加载函数中加入

_getMoreData() async {
    if (!isPerformingRequest) { 
      setState(() => isPerformingRequest = true);
      //TODO 加入网络请求函数调用
      List<*> newEntries = await requestNet();
      setState(() {
        list.addAll(newEntries);
        isPerformingRequest = false;
      });
    }
}

说明

1.isPerformingRequest 为全局变量

2.list 为显示List

加载图标

以下为显示加载图标的函数

Widget _buildProgressIndicator() {
  return new Padding(
    padding: const EdgeInsets.all(8.0),
    child: new Center(
      child: new Opacity(
        opacity: isPerformingRequest ? 1.0 : 0.0,
        child: new CircularProgressIndicator(),
      ),
    ),
  );
}

全部展示提示

ListView.builder(
      itemCount: list.length + 1,
      itemBuilder: (context, index) {
        if (index == list.length) {
          return maxPageNum[arrayIndex] == currentPage[arrayIndex]
              ? _buildListEndView()
              : _buildProgressIndicator();
        } else {
          return _buildShowUnit
        }
      },
      controller: text == _TitleList[0] ? _incomeScrollController
          : _outcomeScrollController,
    );

鸣谢

借鉴： https://juejin.im/post/5b3abfc4518825622c14a6f1 。并自己加以整理。侵权必删。

赞赏

如对您有帮助，支持我，不胜感激