美文网首页
flutter listview 的上拉加载和下拉刷新

flutter listview 的上拉加载和下拉刷新

作者: A然后呢 | 来源:发表于2020-08-13 11:10 被阅读0次
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TabPage2 extends StatefulWidget {
  @override
  _TabPage2State createState() => _TabPage2State();
}

class _TabPage2State extends State<TabPage2> {
  ScrollController _scrollController=new ScrollController();
  bool isLoading = false; //是否正在加载数据
  @override
  void initState() {
    super.initState();
    _scrollController.addListener((){
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) { //滑动到了底部判断
        _getMore();  //上拉加载更多
      }
    });
  }


  List Items=[    //定义一份死数据
    "11111","2222220","333333","555555","8888888","11111","2222220","333333","555555","8888888","11111","2222220","333333","555555","8888888","11111","2222220","333333","555555","8888888"
    ,"11111","2222220","333333","555555","8888888","11111","2222220","333333","555555","8888888","11111","2222220","333333","555555","8888888","11111","2222220","333333","555555","8888888"
    ,"11111","2222220","333333","555555","8888888","11111","2222220","333333","555555","8888888","11111","2222220","333333","555555","8888888"
  ];


  listOnlistener(int index){     //listview条目的点击事件
    setState(() {
      Items[index]="000000";
    });
  }


  Widget _initlist (BuildContext context,int index){    //listview条目绑定

    if(index<Items.length){     //数据长度内,显示数据
      return Column(
        children: <Widget>[
          Row(
            children: <Widget>[

              GestureDetector(
                child:Text(Items[index]),
                onTap: (){
                  listOnlistener(index);
                },
              )
            ],
          ),
          Divider(
            color: Colors.green,
          )
        ],
      );
    }
      return _getMoreWidget();   //数据长度外,显示加载更多的提示条目


  }


  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
        child: ListView.builder(
          controller: _scrollController,
          itemCount: Items.length+1,
          itemBuilder:_initlist
        ),
      onRefresh: setRefresh,
    );
  }

  Future<Null> setRefresh()async{
    setState(() {
      Items.add("刷新加入的数据");
    });
  }

  /**
   * 上拉加载更多
   */
  Future _getMore() async {
    if (!isLoading) {   //判断是否加载数据
      setState(() {
        isLoading = true;    //改成正在加载数据,防止下次滑动重复加载
      });

        setState(() {
          Items.add("加载更多的数据");
          Items.add("加载更多的数据");
          Items.add("加载更多的数据");
          Items.add("加载更多的数据");
          Items.add("加载更多的数据");
          isLoading = false;    //改成加载完毕状态
        });
      };

  }

  /**
   * 加载更多时显示的组件,给用户提示
   */
  Widget _getMoreWidget() {
    return Center(
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              '加载中...     ',
              style: TextStyle(fontSize: 16.0),
            ),
            CircularProgressIndicator(strokeWidth: 1.0,)
          ],
        ),
      ),
    );
  }


  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _scrollController.dispose();   //移除监听
  }
}

相关文章

网友评论

      本文标题:flutter listview 的上拉加载和下拉刷新

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