Flutter ListView添加header及banner

大概想实现的效果是这样

可滑动的listView上面加一个headerView然后一起滑动。可惜在flutter中并没有像iOS中提供一个方法去添加headerView，所以只能想别的办法。

这里我想到了用ListView.builder()，itemBuilder: ((context,index) {} 会返回一个index下标，可以利用这个index的不同来展示不同的界面。

    ListView.builder(
        itemCount: 2,
        itemBuilder: ((context,index) {
          if (index == 0) {
            return _newSwiper(context, list);
          }else {
            return _tableView();
          }
        }),
      ),

因为是listView里面又嵌套了一个listView，所以要将子listView的shrinkWrap和scrollPhysics两个属性设置好，不然滑动会有问题。

效果如下：

看起来有点卡，是公司的电脑卡不是程序卡，不能用自己电脑开发有点僵硬，淦！但是在真机上是很流畅的。

基本需要的功能都已经完成了，但是还需要扩展的话就很麻烦了，需要不断的去判断index的下标，所以还有第二种方案。

利用CustomScrollView的SliverList和SliverToBoxAdapter就可以轻松完成了。

CustomScrollView(
        
        slivers: [

          SliverToBoxAdapter(
            child: _newSwiper(context, list),
          ),

          SliverToBoxAdapter(
            
            child: Container(
              margin: EdgeInsets.only(top: 5,bottom: 5,left: 5),
              child: Text('最近热门',style: TextStyle(fontSize: 18),)
            ),
          ),
        
          SliverList(
            delegate: SliverChildBuilderDelegate (
              (context,index) {
                if (movieList.length > 0) {
                  print('开始赋值');
                  return _tableView(movieList);
                }else {
                  return Visibility(
                    visible: true,
                    child: Container(
                      width: 0,
                      height: 0
                    ),
                  );
                }
              },
              childCount: 1,
            ),
          ),
        ],
      ),

这样做的一个好处是可以无限的扩展，GripView，Header和Footer都是随意添加的，效果也是一样的。

在flutter上实现banner你可以自己去写一个，但是在接触不深的情况下，暂时不要去弄，先用插件实现看看效果，理清思路再去做，这样获得的经验会更多。

dependencies:
  flutter_swiper: ^1.0.6

在依赖库中导入flutter_swiper，getPackage一下，在你需要的地方导入

import 'package:flutter_swiper/flutter_swiper.dart';

具体实现

_newSwiper (BuildContext context,List list) {
   return Container(
      height: 300,
      child: Swiper(
        
        autoplay: true,
        itemHeight: 300,
        pagination: SwiperPagination(
          alignment:Alignment.bottomRight,
        ),
        itemCount: list.length,
        itemBuilder: (context,index){
          return Container (
            decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(list[index]),
                fit: BoxFit.cover,
              ),
            ),
          );
        },
      ),
  );
}

里面有很多的属性，可以根据需要去设置，可以设置pageControl界面。

demo下载地址：Flutter ListView添加header

我会一直更新。