大概想实现的效果是这样
可滑动的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: <Widget>[ 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
我会一直更新。