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

前言

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<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),
)
复制代码

构建

基本参数

参数	默认值	描述
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()	中止自动播放

自动播放

参数	默认值	描述
autoplayDely	3000	自动播放延迟毫秒数.
autoplayDisableOnInteraction	true	当用户拖拽的时候，是否中止自动播放.

全部的定制选项：github.com/jzoom/flutt…

结尾

• 轮子仓库地址：pub.flutter-io.cn/packages/fl…
• 系列演示demo源码：github.com/826327700/f…