Flutter Swiper制作轮播效果
1、引入flutter_swiper插件
flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配.
Flutter_swiper的GitHub地址:https://github.com/best-flutter/flutter_swiper
了解flutter_swiper后,需要作的第一件事就再pubspec.yaml文件中引入这个插件(记得使用最新版)
flutter_swiper: ^1.1.
引入后点击Get Packages下载,或者直接保存,会自动为我们下载包。
Swiper基本参数
参数 | 默认值 | 描述 |
---|---|---|
scrollDirection | Axis.horizontal | 滚动方向,设置为Axis.vertical如果需要垂直滚动 |
loop | true | 无限轮播模式开关 |
index | 0 | 初始的时候下标位置 |
autoplay | false | 自动播放开关. |
autoplayDely | 3000 | 自动播放延迟毫秒数. |
autoplayDiableOnInteraction | true | 当用户拖拽的时候,是否停止自动播放. |
onIndexChanged | void onIndexChanged(int index) | 当用户手动拖拽或者自动播放引起下标改变的时候调用 |
onTap | void onTap(int index) | 当用户点击某个轮播的时候调用 |
duration | 300.0 | 动画时间,单位是毫秒 |
pagination | null | 设置 new SwiperPagination() 展示默认分页指示器 |
control | null | 设置 new SwiperControl() 展示默认分页按钮 |
分页指示器 pagination
分页指示器继承自 SwiperPlugin
,SwiperPlugin
为 Swiper
提供额外的界面.设置为new SwiperPagination()
展示默认分页.
参数 | 默认值 | 描述 |
---|---|---|
alignment | Alignment.bottomCenter | 如果要将分页指示器放到其他位置,那么可以修改这个参数 |
margin | const EdgeInsets.all(10.0) | 分页指示器与容器边框的距离 |
builder | SwiperPagination.dots | 目前已经定义了两个默认的分页指示器样式: SwiperPagination.dots 、 SwiperPagination.fraction ,都可以做进一步的自定义. |
简单的定义:
pagination: new SwiperPagination(
builder: DotSwiperPaginationBuilder(
color: Colors.black54,
activeColor: Colors.white,
))
自定义分页组件:
new Swiper(
...,
pagination:new SwiperCustomPagination(
builder:(BuildContext context, SwiperPluginConfig config){
return new YourOwnPaginatipon();
}
)
);
示例代码如下:
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart'; class HomePage extends StatefulWidget {
@override
HomePageState createState() {
return HomePageState();
}
} class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('轮播组件'),
),
body: Container(
width: MediaQuery.of(context).size.width,
height: 200.0,
child: Swiper(
itemBuilder: _swiperBuilder,
itemCount: ,
pagination: new SwiperPagination(
builder: DotSwiperPaginationBuilder(
color: Colors.black54,
activeColor: Colors.white,
)),
control: new SwiperControl(),
scrollDirection: Axis.horizontal,
autoplay: true,
onTap: (index) => print('点击了第$index个'),
)),
);
} Widget _swiperBuilder(BuildContext context, int index) {
return (Image.network(
"http://via.placeholder.com/350x150",
fit: BoxFit.fill,
));
}
}
内建的布局
new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
"http://via.placeholder.com/288x188",
fit: BoxFit.fill,
);
},
itemCount: ,
viewportFraction: 0.8,
scale: 0.9,
)
new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
"http://via.placeholder.com/288x188",
fit: BoxFit.fill,
);
},
itemCount: ,
itemWidth: 300.0,
layout: SwiperLayout.STACK,
)
new Swiper(
layout: SwiperLayout.CUSTOM,
customLayoutOption: new CustomLayoutOption(
startIndex: -,
stateCount:
).addRotate([
-45.0/,
0.0,
45.0/
]).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 Container(
color: Colors.grey,
child: new Center(
child: new Text("$index"),
),
);
},
itemCount:
)
CustomLayoutOption
被设计用来描述布局和动画,很简单的可以指定每一个元素的状态.
new CustomLayoutOption(
startIndex: -, /// 开始下标
stateCount: /// 下面的数组长度
).addRotate([ // 每个元素的角度
-45.0/,
0.0,
45.0/
]).addTranslate([ /// 每个元素的偏移
new Offset(-370.0, -40.0),
new Offset(0.0, 0.0),
new Offset(370.0, -40.0)
])
Flutter Swiper制作轮播效果的更多相关文章
- Flutter移动电商实战 --(10)使用FlutterSwiper制作轮播效果
1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...
- 10-Flutter移动电商实战-使用FlutterSwiper制作轮播效果
1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...
- Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作
10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...
- Taro -- Swiper的图片由小变大3d轮播效果
Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- vue项目全局引入vue-awesome-swiper插件做出轮播效果
在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...
- Vue如何使用vue-awesome-swiper实现轮播效果
在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用.一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有 ...
- 在 vue 中用 transition 实现轮播效果
概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...
随机推荐
- 牛客算法:DNA序列
import java.util.*; public class Main{ public static void main(String[] args){ try(Scanner in = new ...
- CentOS7.x安装Wiki.js知识库
近期有个需求,搭建一个知识管理系统,所以就找了几个可作为知识管理的软件,最终定位到wiki.js,之所以选择这个,是看中了它的易部署性,该项目是在2016年12月推出了第一个版本,算是比较新的项目了, ...
- Spring MVC + freemarker实现半自动静态化
这里对freemarker的代码进行了修改,效果:1,请求.do的URL时直接生成对应的.htm文件,并将请求转发到该htm文件2,自由控制某个页面是否需要静态化原理:对org.springframe ...
- 阿里云申请免费SSL证书,并配置到Tomcat,实现https访问
第一步:阿里云免费https证书安装 https://jingyan.baidu.com/article/fdffd1f8619481f3e98ca196.html 第二步:阿里云申请免费SSL证书 ...
- Mac: ld: library not found for -lgcc_s.10.4
Mac: ld: library not found for -lgcc_s.10.4 Checking for cc... ld: library not found for -lgcc_s.1 ...
- [Google Guava] 2.1-不可变集合
范例 01 public static final ImmutableSet<String> COLOR_NAMES = ImmutableSet.of( 02 "red&quo ...
- CodeForces 840A - Leha and Function | Codeforces Round #429 (Div. 1)
/* CodeForces 840A - Leha and Function [ 贪心 ] | Codeforces Round #429 (Div. 1) A越大,B越小,越好 */ #includ ...
- Codeforces Round #495 (Div. 2) A,B,C
A题 1.新添加一间酒店,要求酒店离已有的最近的一间酒店的距离恰好等于d 2.最左和最右必定存在合适的两种情况 3.酒店之间的情况就要判断两间酒店间的距离: 小于2d,表示无法在这两间酒店中间找到合适 ...
- 018_linux驱动之_阻塞和非阻塞
阻塞操作 是指在执行设备操作时若不能获得资源则挂起进程,直到满足可操作的条件后再进行操作. 被挂起的进程进入休眠状态,被从调度器的运行队列移走,直到等待的条件被满足. 非阻塞操作 进程 ...
- 题解 CF550A 【Two Substrings】
为什么我的做法跟别人如此不一样啊qwq 思路:暴力判每一个"BA"出现的位置,二分查找他前/后有没有满足条件的"AB",时间复杂度\(O(n\log_{2}n) ...