flutter SmartRefresher+ListView组合，为listview添加headview和footerview

老实说，这个坑就比较大了，搞了一个上午跟下午两小时，还好算是解决掉了。

先上图：

实现效果图：

主要是上面的头是用两个Container进行包裹起来的，然后下面用了一个listview，总的加上了一个SmartRefresher这个玩意（pull_to_refresh）控件，之前的文章有提到过。

然后再看下GIF图。

这里用SingleChrildView嵌套SmartRefresher还是用SmartRefresher嵌套SingleChirldView都是不可行的，因为SmartRefrsher上面有说了。

你用法错了，ListView只能放在SmartRefresher里的child里，因为我内部机制就是判断child是不是ScrollView，是的话取slivers,不是就封一个slivertoboxadapter,你这里相当于scrollable嵌套了。

在github的这个链接地址：https://github.com/peng8350/flutter_pulltorefresh/issues/124

其实我的问题也是这个问题：
SmartRefresher的子空间放Column,子一级是多个widget和listVIew,导致一直上拉不成功

不过上面没有给出具体解决方案，然后我再查了下

CustomScrollView + SliverToBoxAdapter + SliverList

得出了下面的源码：

源码：

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.white,
            centerTitle: true,
            title: _buildTitle(),
            leading: FlatButton(
                onPressed: () {
                  Application.router.pop(context);
                },
                child: Icon(Icons.arrow_back_ios)),
          ),
          body: _buildRoot()),
    );
  }

  Widget _buildRoot() {
    return SmartRefresher(
      enablePullDown: true,
      enablePullUp: true,
      header: WaterDropHeader(),
      footer: CustomFooter(
        builder: (BuildContext context, LoadStatus mode) {
          Widget body;
          if (mode == LoadStatus.idle) {
            body = Text("pull up load");
          } else if (mode == LoadStatus.loading) {
            body = CupertinoActivityIndicator();
          } else if (mode == LoadStatus.failed) {
            body = Text("Load Failed!Click retry!");
          } else {
            body = Text("没有更多数据了");
          }
          return Container(
            height: 55.0,
            child: Center(child: body),
          );
        },
      ),
      controller: _refreshController,
      onRefresh: _onRefresh,
      onLoading: _onLoading,
      child: _buildContent(),
    );
  }

  Widget _buildContent() {
    if (headLoad && hasDataLoaded == 1) {
      return CustomScrollView(slivers: [
        // 如果不是Sliver家族的Widget，需要使用SliverToBoxAdapter做层包裹
        SliverToBoxAdapter(
          child: Container(
            child: Column(
              children: [
                _buildHead(),
                _buildBottomHead(),
              ],
            ),
          ),
        ),
        SliverList(
          delegate: _buildTypeList(),
        )
      ]);
    } else if (hasDataLoaded == 2) {
      return EmptyView('暂无内容');
    } else {
      return Center(
        child: Text('加载中...'),
      );
    }
  }


  SliverChildDelegate _buildTypeList() {
    if (type == TYPE_ASK) {
      return SliverChildBuilderDelegate(_buildItemAsk,
          childCount: askList.length);
    } else if (type == TYPE_EXP) {
      return SliverChildBuilderDelegate(_buildItemExp,
          childCount: expList.length);
    } else if (type == TYPE_SOUCE) {
      return SliverChildBuilderDelegate(_buildItemSource,
          childCount: sourceList.length);
    } else if (type == TYPE_NEWS) {
      return SliverChildBuilderDelegate(_buildItemNews,
          childCount: newsList.length);
    } else {
      return SliverChildBuilderDelegate(_buildItemNotices,
          childCount: noticeList.length);
    }
  }

---

更多资源请访问：

超详细图文搭建个人免费博客

关注「蛇崽网盘教程资源」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。

在微信后台回复「130个小程序」，即可免费领取享有导入就能跑的微信小程序

在微信后台回复「Flutter移动电商」，即可免费领取Flutter移动电商系列全套