前言
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。
IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。
本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。
tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网
正文
轮子
- 轮子名称:flutter_swiper
- 轮子概述:flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配.
- 轮子作者:JZoom
- 推荐指数:★★★★★
- 常用指数:★★★★★
- 效果预览:

安装
dependencies:
flutter_swiper: ^1.1.6
import 'package:flutter_swiper/flutter_swiper.dart';
功能路线
1.x.x 功能实现:
- [x] 无限循环轮播
- [x] 控制按钮
- [x] 分页指示器
- [x] 非无限循环模式
- [x] 单元测试
- [x] 例子
- [x] 滚动方向
- [x] 可定制控制按钮
- [x] 可定制分页
- [x] 自动播放
- [x] 控制器
- [x] 外部分页指示器
- [ ] 更多布局方式
用法介绍
通过widget => new Swiper()构建轮播图控件,通过不同的属性搭配不同的效果: 假设有一组图片:
List<String> imgs=[
'http://xxxx/img1.jpg',
'http://xxxx/img2.jpg',
'http://xxxx/img3.jpg',
'http://xxxx/img4.jpg'
];
默认效果
Container(
height: 250,
child: new Swiper(
itemBuilder: (BuildContext context,int index){
return new Image.network(imgs[index],fit: BoxFit.cover,);
},
itemCount: imgs.length,
pagination: new SwiperPagination(),//如果不填则不显示指示点
control: new SwiperControl(),//如果不填则不显示左右按钮
),
),
3D卡片滚动
Container(
height: 250,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(imgs[index],fit: BoxFit.cover,);
},
itemCount: imgs.length,
viewportFraction: 0.8,
scale: 0.9,
),
),
无限卡片堆叠
Container(
height: 300,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(imgs[index],fit: BoxFit.cover,);
},
itemCount: imgs.length,
itemWidth: 300.0,
layout: SwiperLayout.STACK,
),
),
无限卡片堆叠2
Container(
height: 300,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(imgs[index],fit: BoxFit.cover,);
},
itemCount: imgs.length,
itemWidth: 300.0,
itemHeight: 300.0,
layout: SwiperLayout.TINDER,
),
),
自定义效果
Container(
height: 200,
child: new Swiper(
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)
]),
itemWidth: 300.0,
itemHeight: 200.0,
itemBuilder: (context, index) {
return new Image.network(imgs[index],fit: BoxFit.cover,);
},
itemCount: imgs.length),
)
构建
基本参数

分页指示器
分页指示器继承自 SwiperPlugin
,SwiperPlugin
为 Swiper
提供额外的界面.设置为new SwiperPagination()
展示默认分页.

如果需要定制自己的分页指示器,那么可以这样写:
new Swiper(
...,
pagination:new SwiperCustomPagination(
builder:(BuildContext context, SwiperPluginConfig config){
return new YourOwnPaginatipon();
}
)
);
控制按钮
控制按钮组件也是继承自 SwiperPlugin
,设置 new SwiperControl()
展示默认控制按钮.

控制器(SwiperController)
SwiperController
用于控制 Swiper的index
属性, 停止和开始自动播放. 通过 new SwiperController()
创建一个SwiperController实例,并保存,以便将来能使用。

自动播放

所有的定制选项:https://github.com/jzoom/flutter_swiper/blob/master/example/lib/src/ExampleCustom.dart