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

港控/mmm° 2021-06-06 15:27 1760阅读 0赞

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

先上图：

#### 实现效果图： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]  
主要是上面的头是用两个Container进行包裹起来的，然后下面用了一个listview，总的加上了一个SmartRefresher这个玩意（pull\_to\_refresh）控件，之前的文章有提到过。

然后再看下GIF图。

![在这里插入图片描述][20190809172739345.gif]

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

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

在github的这个链接地址：[https://github.com/peng8350/flutter\_pulltorefresh/issues/124][https_github.com_peng8350_flutter_pulltorefresh_issues_124]

其实我的问题也是这个问题：  
[SmartRefresher的子空间放Column,子一级是多个widget和listVIew,导致一直上拉不成功][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: <Widget>[
            // 如果不是Sliver家族的Widget，需要使用SliverToBoxAdapter做层包裹
            SliverToBoxAdapter(
              child: Container(
                child: Column(
                  children: <Widget>[
                    _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);
        }
      }

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/9cfe936146d3494f88fee80f73b3e6d9.png
[20190809172739345.gif]: /images/20210529/c55d0e66853344cc8808ba522d3af630.png
[https_github.com_peng8350_flutter_pulltorefresh_issues_124]: https://github.com/peng8350/flutter_pulltorefresh/issues/124
[SmartRefresher_Column_widget_listVIew]: https://github.com/peng8350/flutter_pulltorefresh/issues/143