今天分享的内容是关于图片轮播的实现，使用到的库是flutter_swiper，如果有出现空检查报错的，可以使用flutter_swiper_null_safety
轮播图效果如下：
先贴出基本参数详解：
| 参数 | 说明 |
|---|---|
| itemBuilder | 列表的构造 |
| indicatorLayout | 指示器的类型，如带颜色的、可以放大的等等 |
| itemCount | 轮播列表的数量 |
| autoplay | 是否自动轮播 |
| layout | 构建轮播的布局 |
| autoplayDelay | 自动轮播之间的间隔 |
| duration | 轮播动画时长 |
| onIndexChanged | 轮播切换的监听 |
| index | 初始位置 |
| onTap | 轮播的点击事件 |
| control | 左右箭头 |
| loop | 是否循环轮播 |
| scrollDirection | 轮播方向 |
| pagination | 指示器样式 |
| customLayoutOption | 动画效果 |
| viewportFraction | 当前视窗比例，小于1时就会在屏幕内，可以看见旁边的轮播图 |
| itemHeight | 单个轮播的高度 |
| itemWidth | 单个轮播的宽度 |
| scale | 轮播图之间的间距 |
（一）添加依赖并引入
添加依赖：
flutter_swiper: ^1.1.6或
flutter_swiper_null_safety: ^1.0.2（二）普通的横向/竖向轮播，效果如开头gif中的第一种和第三种
代码如下：
Swiper(itemCount: _imageList.length,itemBuilder: (context, index) {return Image.network(_imageList[index],fit: BoxFit.cover,);},autoplay: true,//自动轮播onIndexChanged: (index) {},//引起下标变化的监听onTap: (index) {},//点击轮播时调用duration: 1000,//切换时的动画时间autoplayDelay: 2000,//自动播放间隔毫秒数.autoplayDisableOnInteraction: false,loop: true,//是否无限轮播scrollDirection: Axis.horizontal,//滚动方向index: 0,//初始下标位置scale: 0.6,//轮播图之间的间距viewportFraction: 0.8,//当前视窗比例，小于1时就会在屏幕内，可以看见旁边的轮播图indicatorLayout: PageIndicatorLayout.COLOR,pagination: new SwiperPagination(),//底部指示器control: new SwiperControl(), //左右箭头)换成竖直轮播的代码如下：
//滚动方向scrollDirection: Axis.vertical以上效果会有缩放的样式，如果想要普通的不进行缩放的，可以将以下参数删除：
scale: 0.6,//轮播图之间的间距viewportFraction: 0.8,//当前视窗比例，小于1时就会在屏幕内，可以看见旁边的轮播（三）效果图中的第二种
使用下方的参数实现效果：
layout: SwiperLayout.TINDER其他的参数和上面的情况一致
（四）效果图中的第四种，带有自定义动画的
代码如下:
Swiper(itemWidth: 300,itemHeight: 200,layout: SwiperLayout.CUSTOM,customLayoutOption: new CustomLayoutOption(startIndex: -1, stateCount: 3).addRotate([-45.0 / 180, 0.0, 45.0 / 180]).addTranslate([new Offset(-370.0, -40.0),new Offset(0.0, 0.0),new Offset(370.0, -40.0)]),autoplay: true,duration: 2000,itemBuilder: (context, index) {return new Container(decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10)),image: DecorationImage(image: NetworkImage(_imageList[index]),fit: BoxFit.fill)),);},itemCount: _imageList.length,indicatorLayout: PageIndicatorLayout.COLOR,pagination: SwiperPagination(alignment: Alignment.bottomCenter,builder: FractionPaginationBuilder(activeColor: Colors.grey,color: Colors.black,fontSize: 20,activeFontSize: 25)),//底部指示器)customLayoutOption用来自定义位移与旋转的动画
（五）自定义指示器
| 参数 | 说明 |
|---|---|
| pagination | 定义指示器，对应的是SwiperPagination组件 |
SwiperPagination组件的参数如下：
| 参数 | 说明 |
|---|---|
| alignment | 指示器的位置 |
| margin | 指示器与父组件的间距 |
| builder | 指示器的样式，对应的是SwiperPlugin的子类 |
builder对应的组件主要有以下几种：
- FractionPaginationBuilder 数字指示器
builder: FractionPaginationBuilder(activeColor: Colors.grey,color: Colors.black,fontSize: 20,activeFontSize: 25)- RectSwiperPaginationBuilder 矩形指示器
builder: RectSwiperPaginationBuilder(activeColor: Colors.red,color: Colors.grey,size: Size(20, 10),activeSize: Size(20, 10))),- DotSwiperPaginationBuilder 圆形指示器
builder: DotSwiperPaginationBuilder(color: Colors.grey,activeColor: Colors.red,size: 10.0,activeSize: 20.0,space: 5.0)
到此为止，使用flutter_swiper实现轮播效果就介绍完了，要是觉得有用记得点个赞
