flutter_swiper最强大的swiper, 多种布局方式，无限轮播，Android和IOS双端适配.
1、在pubspec.yaml引入flutter_swiper
flutter_swiper: ^1.1.6
记得执行
flutter pub get
2、引用
import 'package:flutter_swiper/flutter_swiper.dart';
3、使用
Swiper(
itemBuilder: (BuildContext context,int index){
// 配置图片地址
return new Image.network(productModel.headImages[index],fit: BoxFit.fill,);
},
// 配置图片数量
itemCount: productModel.headImages.length ,
// 底部分页器
pagination: new SwiperPagination(),
// 左右箭头
control: new SwiperControl(),
// 无限循环
loop: true,
// 自动轮播
autoplay: true,
)
4、效果图
5、Swiper基本参数
| 参数 | 默认值 | 描述 |
|---|---|---|
| scrollDirection | Axis.horizontal | 滚动方向，如果需要垂直滚动设置为Axis.vertical |
| loop | true | 无限轮播模式开关 |
| index | 0 | 初始的时候下标位置 |
| autoplay | false | 自动播放开关 |
| autoplayDely | 3000 | 自动播放延迟毫秒数 |
| autoplayDiableOnInteraction | true | 当用户拖拽的时候，是否停止自动播放 |
| onIndexChanged | void onIndexChanged(int index) | 当用户手动拖拽或者自动播放引起下标改变的时候调用 |
| onTap | void onTap(int index) | 当用户点击某个轮播的时候调用 |
| duration | 300.0 | 动画时间，单位是毫秒 |
| pagination | null | 设置 new SwiperPagination() 展示默认分页指示器 |
| control | null | 设置 new SwiperControl() 展示默认分页按钮 |
6、分页指示器 SwiperPagination 参数
| 参数 | 默认值 | 描述 |
|---|---|---|
| alignment | Alignment.bottomCenter | 如果要将分页指示器放到其他位置，那么可以修改这个参数 |
| margin | EdgeInsets.all(10.0) | 分页指示器与容器边框的距离 |
| builder | SwiperPagination.dots | 两个默认的分页指示器样式： SwiperPagination.dots 、 SwiperPagination.fraction（可自定义） |
7、控制按钮 SwiperControl 参数
| 参数 | 默认值 | 描述 |
|---|---|---|
| iconPrevious | Icons.arrow_back_ios | 上一页的IconData |
| iconNext | Icons.arrow_forward_ios | 下一页的IconData |
| color | Theme.of(context).primaryColor | 控制按钮颜色 |
| size | 30.0 | 控制按钮的大小 |
| padding | const EdgeInsets.all(5.0) | 控制按钮与容器的距离 |
控制器(SwiperController)可使用方法
| 方法 | 描述 |
|---|---|
| void move(int index, {bool animation: true}) | 移动到指定下标，设置是否播放动画 |
| void next({bool animation: true}) | 下一页 |
| void previous({bool animation: true}) | 上一页 |
| void startAutoplay() | 开始自动播放 |
| void stopAutoplay() | 停止自动播放 |