美文网首页
Flutter下拉刷新上拉加载

Flutter下拉刷新上拉加载

作者: 倪大头 | 来源:发表于2019-08-08 09:21 被阅读0次

    下拉刷新,有官方widget——RefreshIndicator
    直接套在需要加刷新功能的 widget 外面就可以了:

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: RefreshIndicator(
        onRefresh: _loadData,
        child: getBody(),
      ));
    }
    

    onRefresh是下拉时调用的方法

    刷新方法:

    Future<Null> _loadData() async {
      try {
        Response response = await Dio().post('http://我是api',
            data: {'key': 'value'},
            options: new Options(
                contentType:
                    ContentType.parse("application/x-www-form-urlencoded")));
        setState(() {
          if (showMore) {//上拉加载
            dataArr.addAll(response.data['data']);
          } else {
            dataArr.clear();
            dataArr = response.data['data'];
          }
    
          showMore = false;
        });
      } catch (e) {
        print(e);
      }
    }
    

    上拉加载官方没有提供,需要用 ScrollController 监控列表滚动:

    List dataArr = [];
    bool showMore = false; //是否上拉加载
    
    ScrollController _scrollController = ScrollController();
      
    @override
    void initState() {
      super.initState();
      _scrollController.addListener(() {
        if (_scrollController.position.pixels ==
            _scrollController.position.maxScrollExtent) {
          print('上拉加载');
          setState(() {
            showMore = true;
          });
          _loadData();
        }
      });
      _loadData();
    }
    
    @override
    void dispose() {
      _scrollController.dispose();//监听器不用了要横着放
      super.dispose();
    }
    

    相关文章

      网友评论

          本文标题:Flutter下拉刷新上拉加载

          本文链接:https://www.haomeiwen.com/subject/qpltjctx.html