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 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...
随机推荐
- 剑指Offer的学习笔记(C#篇)-- 左旋转字符串
题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”abc ...
- Linux下恢复误删除的文件
原文地址:http://www.libenfu.com/vim-分区下误删的文件,恢复文件全记录-转 当时我的工作目录是/source/needrecovered. $ pwd /source/nee ...
- Pycharm----破解码的获取
网站:http://idea.lanyus.com/ 复制后,粘贴到pycharm中的激活即可
- JAVA开发WEBSERVICE方式
webservice的应用已经越来越广泛了,下面介绍几种在Java体系中开发webservice的方式,相当于做个记录. 1.Axis2方式 Axis是apache下一个开源的webservice开发 ...
- Github:VS使用GitHub要点
1.VS打开[扩展或更新]安装插件[Github Extension for VisualStudio] 2.在团队资源管理中可以Clone线上已经有的库到本地,或者可以新建库同步到线上 3.同步设置 ...
- 【题解】P1638 逛画展-C++
原题传送门 思路这道题目可以通过尺取法来完成 (我才不管什么必须用队列)什么是尺取法呢?顾名思义,像尺子一样取一段,借用挑战书上面的话说,尺取法通常是对数组保存一对下标,即所选取的区间的左右端点,然后 ...
- Self install windows service in .NET c#
http://stackoverflow.com/questions/4144019/self-install-windows-service-in-net-c-sharp using System; ...
- .pid文件
pid文件为进程文件,默认的在每个/var/run/目录下生成,当使用systemctl进行进程启动的时候,在这个目录下就会生成相应的pid文件,今天在进行poc测试的时候,对进程执行了enable操 ...
- poj 2762
Tarjan + TopsortTarjan 缩点Topsort 判断 Topsort 判断:在DAG中若初始状态下存在多于1个入度为0的点则说明这些 入度为0的点之间不会有路径可达若不存在入度为0的 ...
- [Luogu] 子共七
https://www.luogu.org/problemnew/show/P3131 A表示前缀和数组 A[r] - A[l - 1] = 0 (mod 7) 得 A[r] = A[l - 1] ( ...