flutter listview 加头加尾及刷新问题解决

flutter中listview我没有发现专门的方法去加头加尾，那就动手去实现吧；首先还是看效果

view4.gif

效果就是这样了，那接下来看下代码，首先贴上完整代码

class ListPage extends StatefulWidget  {

  List<Widget> listHeader,listBottom;
  int dataLength;

  final itemBuild;


  ListPage({this.listHeader, this.listBottom, this.dataLength, this.itemBuild});

  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {


  @override
  Widget build(BuildContext context) {
    return ListView.builder(itemCount:_itemCount(),itemBuilder: (context,index){
     if (index<_getHeaderCount()) {
         return Column(children: <Widget>[
           widget.listHeader[index]
         ] ,);
     }else if(index>=widget.dataLength+_getHeaderCount()){
       return Column(children: <Widget>[
         widget.listBottom[index-_getHeaderCount()-widget.dataLength]
       ],);
     }else{
       return widget.itemBuild(context,index-_getHeaderCount());
     }
      });
  }

  int _getHeaderCount(){
    return widget.listHeader!=null?widget.listHeader.length:0;
  }

  int _getBottomCount(){
    return widget.listBottom!=null?widget.listBottom.length:0;
  }

  int _itemCount(){
    return widget.dataLength+_getHeaderCount()+_getBottomCount();
  }
}

然后看下使用部分的完整代码

class ListHeaderBottomDemo extends StatefulWidget {
  @override
  _ListHeaderBottomDemoState createState() => _ListHeaderBottomDemoState();
}

class _ListHeaderBottomDemoState extends State<ListHeaderBottomDemo> {

  List<String> listData=[];

  List<Widget> listHeader=[];

  List<Widget> listFooter=[];

  bool isAddHeader=true,isAddFooter=true;

  @override
  void initState(){
    super.initState();
    listData.addAll(getList());
    listHeader=getHeaderList();
    listFooter=List.generate(1, (index){
      return Text("尾部 $index");
    });
  }

  List<String> getList(){
    return List.generate(3, (index){
      return "我是第$index项";
    });
  }

  List<Widget> getHeaderList(){
    return List.generate(1, (index){
      return Text("头部 ",style: TextStyle(color: Colors.red),);
    });
  }

  List<Widget> getFooterList(){
    return List.generate(1, (index){
      return Text("尾部 ",style: TextStyle(color: Colors.red),);
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text("list加头加尾"),centerTitle: true ,elevation:0),
        body:Column(children: <Widget>[
          GestureDetector(child: Container(color: Colors.red,height:40,width:double.infinity,child: Text("加头",style: TextStyle(color: Colors.white),),),onTap: (){
            listHeader.addAll(getHeaderList());
            setState(() {

            });
          },)  ,
          GestureDetector(child: Container(color: Colors.blue,height:40,width:double.infinity,child: Text("加尾",style: TextStyle(color: Colors.white),),),onTap: (){
            listFooter.addAll(getFooterList());
            setState(() {

            });

          },),
          Expanded(flex:1,child:ListPage(listHeader:listHeader,
            listBottom: listFooter,
            itemBuild: (context,index){
              return Text(listData[index]);
            },dataLength: listData.length,))
        ],));
  }
}

重点就在这段

 Expanded(flex:1,child:ListPage(listHeader:listHeader,
            listBottom: listFooter,
            itemBuild: (context,index){
              return Text(listData[index]);
            },dataLength: listData.length,))

就在我以为事情做完了之后，却发现个问题，在使用pull_to_refresh这个库去做刷新的时候去发现下拉不能使用，去查看了一下发现pull_to_refresh的文档有介绍

微信截图_20200114154401.png

问题是发现了，但该怎么解决呢，本着事情越简单越好的原则，我的想法是把刷新也放在listPage这个控件中去做 先看看更改后的效果以及代码

view5.gif

class ListPage extends StatefulWidget  {

  List<Widget> listHeader,listBottom;
  int dataLength;

  final itemBuild;

  final RefreshController controller;

  final VoidCallback fresh,load;

  final bool enablePullUp;



  ListPage({this.listHeader, this.listBottom, this.dataLength, this.itemBuild,@required this.controller, this.fresh, this.load, this.enablePullUp=true});

  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {


  @override
  Widget build(BuildContext context) {
    return SmartRefresher(
        controller: widget.controller,
        header: MaterialClassicHeader(),
        footer: ClassicFooter(),
        onRefresh: widget.fresh,
        onLoading: widget.load,
        enablePullDown: true,
        enablePullUp: widget.enablePullUp,
        child:ListView.builder(itemCount:_itemCount(),itemBuilder: (context,index){
          if (index<_getHeaderCount()) {
            return Column(children: <Widget>[
              widget.listHeader[index]
            ] ,);
          }else if(index>=widget.dataLength+_getHeaderCount()){
            return Column(children: <Widget>[
              widget.listBottom[index-_getHeaderCount()-widget.dataLength]
            ],);
          }else{
            return widget.itemBuild(context,index-_getHeaderCount());
          }
        },));
  }

  int _getHeaderCount(){
    return widget.listHeader!=null?widget.listHeader.length:0;
  }

  int _getBottomCount(){
    return widget.listBottom!=null?widget.listBottom.length:0;
  }

  int _itemCount(){
    return widget.dataLength+_getHeaderCount()+_getBottomCount();
  }
}

与原来相比，增加了SmartRefresher这个刷新控件，并且加了一些刷新加载的回调。这样子的话就可以对其进行刷新操作了。