flutter-实现一个下拉刷新上拉加载的列表

1.下拉刷新:s使用自带的控件实现

new RefreshIndicator(
        onRefresh: onRefresh,
        child: ListView.builder(
          physics: new AlwaysScrollableScrollPhysics(),
          itemBuilder: getItemView,
          itemCount: isShowLoadmore ? datas.length + 1 : datas.length,
          controller: scrollController,
        ),
      ),

 

2.上拉加载:监听listview滚动到底部的时间,如果滚动到底部,设置listview的长度是length+1,在获取子view的方法中,处理加载中显示的view。

给listview添加滚动到底部的监听器

 ScrollController scrollController = ScrollController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //对上拉加载更多的处理
    scrollController.addListener(() {
      if (scrollController.position.pixels >=
          scrollController.position.maxScrollExtent - 10) {
        if (!isShowLoadmore) {
          //滚动到底部
          setState(() {
            isShowLoadmore = true;
            getDataByIndex(index + 1);
          });
        }
      }
    });

    getDataByIndex(0);
  }

2.对listview的getItemview进行处理

 //渲染子view
  Widget getItemView(BuildContext context, int positon) {
    if (positon >= datas.length) {
      if (isShowLoadmore) {
        return new Container(
          height: 50,
          child: new Center(
            child: new Text("下拉加载更多..."),
          ),
        );
      }
      return null;
    }
    return new GestureDetector(
      child: new Container(
        decoration: new BoxDecoration(
            border: Border.all(color: Colors.greenAccent, width: 2)),
        padding: EdgeInsets.only(left: 10, top: 20, bottom: 20),
        child: new Text(datas[positon]),
      ),
    );
  }

3.加载数据和onfresh的处理

Future<void> getDataByIndex(needLoadIndex) async {
    if (isLoading) {
      setState(() {
        isLoading = false;
        isShowLoadmore = false;
      });
      return;
    }
    setState(() {
      isLoading = true;
    });

    await Future.delayed(Duration(seconds: 4), () {
      setState(() {
        index = needLoadIndex;
        for (int i = 0; i < 10; i++) {
          datas.add("第" + index.toString() + "页第" + i.toString() + "条数据");
        }
        isLoading = false;
        isShowLoadmore = false;
        datas = datas;
      });
    });
  }

 

Future<void> onRefresh() async {
    if (isLoading) {
      setState(() {
        isLoading = false;
        isShowLoadmore = false;
      });
      return;
    }
    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        index = 0;
        isLoading = false;
        if (index == 0) {
          datas.clear();
        }
        for (int i = 0; i < 10; i++) {
          datas.add("第" + index.toString() + "页第" + i.toString() + "条数据");
        }
        datas = datas;
      });
    });
  }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值