flutter好用的轮子推荐三-超强轮播图Swiper flutter好用的轮子推荐三-超强轮

前言 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 功能实现：

无限循环轮播
控制按钮
分页指示器
非无限循环模式
单元测试
例子
滚动方向
可定制控制按钮
可定制分页
自动播放
控制器
外部分页指示器
更多布局方式

用法介绍
通过widget => new Swiper(）构建轮播图控件，通过不同的属性搭配不同的效果：
假设有一组图片：

List 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), )

构建
基本参数

参数	默认值	描述
scrollDirection	Axis.horizontal	滚动方向，设置为Axis.vertical如果需要垂直滚动
loop	true	无限轮播模式开关
index	0	初始的时候下标位置
autoplay	false	自动播放开关.
onIndexChanged	void onIndexChanged(int index)	当用户手动拖拽或者自动播放引起下标改变的时候调用
onTap	void onTap(int index)	当用户点击某个轮播的时候调用
duration	300.0	动画时间，单位是毫秒
pagination	null	设置 `new SwiperPagination()` 展示默认分页指示器
control	null	设置 `new SwiperControl()` 展示默认分页按钮

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

参数	默认值	描述
alignment	Alignment.bottomCenter	如果要将分页指示器放到其他位置，那么可以修改这个参数
margin	const EdgeInsets.all(10.0)	分页指示器与容器边框的距离
builder	SwiperPagination.dots	目前已经定义了两个默认的分页指示器样式： `SwiperPagination.dots` 、 `SwiperPagination.fraction`，都可以做进一步的自定义.

如果需要定制自己的分页指示器，那么可以这样写：

new Swiper( ..., pagination:new SwiperCustomPagination( builder:(BuildContext context, SwiperPluginConfig config){ return new YourOwnPaginatipon(); } ) );

控制按钮控制按钮组件也是继承自 SwiperPlugin,设置 new 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) SwiperController 用于控制 Swiper的index属性, 停止和开始自动播放. 通过 new SwiperController() 创建一个SwiperController实例，并保存，以便将来能使用。

方法	描述
void move(int index, {bool animation: true})	移动到指定下标，设置是否播放动画
void next({bool animation: true})	下一页
void previous({bool animation: true})	上一页
void startAutoplay()	开始自动播放
void stopAutoplay()	停止自动播放