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,SwiperPluginSwiper 提供额外的界面.设置为new SwiperPagination() 展示默认分页.

参数 默认值 描述
alignment Alignment.bottomCenter 如果要将分页指示器放到其他位置,那么可以修改这个参数
margin const EdgeInsets.all(10.0) 分页指示器与容器边框的距离
builder SwiperPagination.dots 目前已经定义了两个默认的分页指示器样式: SwiperPagination.dotsSwiperPagination.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制作轮播效果的更多相关文章

  1. Flutter移动电商实战 --(10)使用FlutterSwiper制作轮播效果

    1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...

  2. 10-Flutter移动电商实战-使用FlutterSwiper制作轮播效果

    1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...

  3. Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作

    10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...

  4. Taro -- Swiper的图片由小变大3d轮播效果

    Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...

  5. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  6. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  7. vue项目全局引入vue-awesome-swiper插件做出轮播效果

    在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...

  8. Vue如何使用vue-awesome-swiper实现轮播效果

    在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用.一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有 ...

  9. 在 vue 中用 transition 实现轮播效果

    概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...

随机推荐

  1. 日志分析方法概述 & Web日志挖掘分析的方法

    日志在计算机系统中是一个非常广泛的概念,任何程序都有可能输出日志:操作系统内核.各种应用服务器等等.日志的内容.规模和用途也各不相同,很难一概而论. 本文讨论的日志处理方法中的日志,仅指Web日志.其 ...

  2. uhd镜像重新安装

    USRP LW-X300连接网口,设置IP地址:192.168.10.1,子网验码:255.255.255.0 连接后uhd_usrp_probe提示更新镜像. 终端输入: uhd_image_loa ...

  3. Hadoop动态增加节点与删除节点

    Hadoop的全分布式安装网上也很多教程,踩过很多坑,整理不出来了……赶紧把增加删除节点留住. 均衡数据 (1)设置数据传输带宽为64M(默认值比较低) hdfs dfsadmin -setBalan ...

  4. ASP.Net页面生存周期、Page_Load方法

    一.ASP.Net Web应用程序中的请求处理过程 二. http模块生命周期: 三.Asp.NET页面生命周期 1.阶段 阶段 说明 请求页面(Page Request) 严格地说,这个阶段不是页面 ...

  5. JSP基础语法总结

    任何语言都有自己的语法,Java中有.JSP虽然是在Java上的一种应用,但是依然有其自己扩充的语法,而且在Jsp中,所有Java语句都可以使用. 一.Jsp的模板元素 Jsp页面中的HTML内容称为 ...

  6. 内存泄露检测之mtrace

    ————————————————版权声明:本文为CSDN博主「知耻而后勇的蜗牛」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog ...

  7. JavaScript里的递增"++"和递减"--"

    递增"++",表示在原来的数值上+1 tips:比如a=1,那么++a或者a++都等于2. 递减"--",表示再原来的数值上-1,前置/后置递减计算过程同递增 ...

  8. xShell终端中文乱码-解决方法

    中文乱码的原因有三种:(1)Linux系统的编码问题(2)xShell终端的编码问题(3)两端的语言编码不一致 linux系统编码 (1) locale:查看系统语言 (2)echo $LANG:查看 ...

  9. 007_linuxC++之_构造函数的初级应用

    (一)构造函数:用来在创建对象时初始化对象, 即为对象成员变量赋初始值 (二)构造函数的命名必须和类名完全相同 (三)更对具体的查看:构造函数 (四)直接分析程序 运行结果 解析上面程序: 1. 当程 ...

  10. 010_STM32程序移植之_lib库建立

    STM32之lib库建立 1. 测试环境:STM32C8T6 2. 测试接口: 3.串口使用串口一,波特率9600 单片机引脚------------CH340引脚 VCC-------------- ...