flutter组件5【上滑加载】

sinnoo

发布于 2020-11-13 15:58:29

9620

发布于 2020-11-13 15:58:29

文章被收录于专栏：技术人生技术人生

一、解释

flutter并没有提供上滑加载的组件，我们需要像安卓一样

进行滚动监听，然后处理footer，header，list数组等变量来实现

二、 ScrollController

上滑加载用到的

三、核心

    ScrollController _scrollController = new ScrollController();
    _scrollController.addListener((){
      if(_scrollController.position.pixels ==
         _scrollController.position.maxScrollExtent) {
        _getMore();
      }
    });

pixels 获取当前位置的像素值，maxScrollExtent 获得 SrollController 监听控件可以滚动的最大范围

那么这个判断，则是判断是否滑动到最底部，如果是的话，就开始加载更多数据

_getMore加载更多数据的方法

enum LoadingStatus {
  STATUS_LOADING,
  STATUS_COMPLETED,
  STATUS_IDEL,
}

一些枚举变量，用作后面的判断

四、详情的说明

1.这是一个列表的动态加载

由于循环是从0开始的，所以数组长度等于当前循环最后一位的时候，出现加载效果条

  Widget getListView() {
    return new ListView.builder(
      itemCount: (_list == null) ? 0 : _list.length,
      itemBuilder: (BuildContext context, int position) {
        if (position == _list.length-1) {
          //当滑动到底部的时候，出现加载状态
            return _loadingView();
        } else {
          return getItem(_list[position]);
        }
      },
      controller: _scrollController,
    );
  }

2.我们看加载效果条的逻辑

我们定义了一个组件，当加载状态等于加载中时，我们显示出加载条，否则隐藏效果

主要是visible属性进行控制

  Widget _pad(Widget widget,{l,t,r,b}){
    return new Padding(
        padding: EdgeInsets.fromLTRB(l ??= 0.0, t ??= 0.0, r ??= 0.0, b ??= 0.0),
        child: widget,
    );
  }
  Widget _loadingView(){
    var loadingTs = TextStyle(color: AppTheme().greeTheme.primaryColor,fontSize: 10);
    var loadingText = _pad(Text(loadText, style: loadingTs), l:20.0);
    var loadingIndicator = new Visibility(
      visible:  loadStatus == LoadingStatus.STATUS_LOADING ? true :false,
        child: SizedBox(
          width: 20.0,
          height: 20.0,
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation(AppTheme().greeTheme.primaryColor),

          ),
        )
    );
    return _pad(
      Row(
        children: <Widget>[loadingIndicator,loadingText],
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
      ),
      t:10.0,
      b:10.0
    );
  }

3.我们初始化的时候controller监听到底部的时候，会触发_getMore方式

首先判断加载条状态是否为空闲，空闲的时候，先设置为加载中

请求数据成功后，判断是否有数据数组，当存在的时候，追加列表

当没有数据的时候，文案换成没有更多数据了，显示在底部

  _getMore() async {
    if (loadStatus == LoadingStatus.STATUS_IDEL) {
      setState(() {
        loadStatus = LoadingStatus.STATUS_LOADING;
        loadText = '加载中...';
      });
    }
    page++;
    var apiUrl = 'https:?cid=' +
        widget.tid +
        '&size=20&page=' +
        page.toString();
    Response response = await Dio().get(apiUrl);
    List Data = response.data['data'];
    if (response.data['retcode'] == 2000000) {
      if (response.data['data'].length >0) {
        setState(() {
          _list.addAll(Data);
          loadStatus = LoadingStatus.STATUS_COMPLETED;
          loadText = '加载中';
        });
      } else {
        setState(() {
          loadText = '没有更多数据了';
        });
      }

    }
  }

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

编程算法

登录后参与评论

0 条评论

热度