ios 卡片轮播_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.6import '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),)

构建

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

结尾

• 轮子仓库地址：https://pub.flutter-io.cn/packages/flutter_swiper
• 系列演示demo源码：https://github.com/826327700/flutter_plugins_demo