前言
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…
今天的文章flutter好用的轮子推荐三-超强轮播图Swiper分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20356.html