中文地址:

https://github.com/best-flutter/flutter_swiper/blob/master/README-ZH.md

基本参数

参数 默认值 描述
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,都可以做进一步的自定义.

案例:

pubspec.yaml

flutter_swiper: ^1.1.6
Swiper.dart
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart'; class SwiperPage extends StatefulWidget {
SwiperPage({Key key}) : super(key: key); _SwiperPageState createState() => _SwiperPageState();
} class _SwiperPageState extends State<SwiperPage> {
List<Map> imgList = [
{"url": "https://www.itying.com/images/flutter/1.png"},
{"url": "https://www.itying.com/images/flutter/2.png"},
{"url": "https://www.itying.com/images/flutter/3.png"}
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('轮播图组件演示'),
),
body: Column(
children: <Widget>[
Container(
width: double.infinity,
// height: 150,
child: AspectRatio(
aspectRatio: / ,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imgList[index]['url'],
fit: BoxFit.fill,
);
},
itemCount: imgList.length,
pagination: new SwiperPagination(),
loop: true,
autoplay: true,
// control: new SwiperControl(),
),
),
)
],
),
);
}
}

28 Flutter 轮播图 flutter_swiper的更多相关文章

  1. Flutter轮播图

    前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果.Flutter中的动画组件主要分为两类: 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如An ...

  2. 05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品

    Config.dart class Config{ static String domain='http://jd.itying.com/'; } FocusModel.dart class Focu ...

  3. 7、Flutter banner_view 轮播图的使用

    1.前言 实现轮播图,效果如下: 2.实现 将采用 banner_view 实现:资源库地址 2.1.yaml 引入依赖 在 pubspec.yaml 声明需要引用的库,执行命令 flutter pa ...

  4. Flutter学习五之网络请求和轮播图的实现

    上期讲到了,怎样实现一个下拉刷新和加载更多的列表,数据更新,需要使用到网络请求,在flutter中,怎样实现一个网络请求呢?官方使用的是dart io中的HttpClient发起的请求,但HttpCl ...

  5. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  6. 从零开始,搭建博客系统MVC5+EF6搭建框架(5),博客详情页、留言、轮播图管理、右侧统计博文

    一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效 ...

  7. (新手向)基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  8. CSS3最简洁的轮播图

    <!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> ...

  9. 纯css3 轮播图 利用keyframes

    效果: 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好 总共花费的 animation-duration:time  与每帧延延迟的时间的交错:要让 ...

随机推荐

  1. 推荐系统(5)---大量项目topk近邻相似度

    Kd树+BBF(最邻近.次邻近查询)Python实现 kd树和BBF算法 精确Top-K检索及其加速方法探讨

  2. 猜数游戏-人机对战-经典的randint使用

    翻阅去年的笔记,老师曾经教的random模块下的三种用法,其中之一是randint用法,今天上传,留作笔记参考.人生苦短,我用python! # -*- coding: UTF-8 -*- impor ...

  3. 修改 hosts 完成域名绑定

    修改 hosts 完成域名绑定 mac 用户直接执行 vim /private/etc/hosts在 hosts 文件最后添加一行: 127.0.0.1a.com 这一句是什么意思呢? 就是告诉我们的 ...

  4. 10 loader - 配置处理less文件的loader

    第一步:装包 cnpm i less-loader -D 安装完提示警告 peerDependencies WARNING less-loader@* requires a peer of less@ ...

  5. go语言开发IDE

    软件下载及绿化方法 GoLand-2018.3 链接:https://pan.baidu.com/s/15AKPDIJIN86vxfriHBjE-g 提取码:060h 选择路径的时候,去掉路径名的版本 ...

  6. js for/in循环及其它

    for in 循环不仅可以遍历对象的属性,还可以遍历数组. Js 中为数组提供了多种遍历方式 const ary = ['a', 'b', 'c']; // 最基本的方式, 只能遍历下标有序递增的数组 ...

  7. fs模块

    fs.readdir(path, callback) 异步读取目录下文件 path - 文件路径. callback - 回调函数,回调函数带有两个参数err, files,err 为错误信息,fil ...

  8. Selenium常用API的使用java语言之14-多窗口切换

    在页面操作过程中有时候点击某个链接会弹出新的窗口, 这时就需要主机切换到新打开的窗口上进行操作.WebDriver提供了switchTo().window()方法可以实现在不同的窗口之间切换. 以百度 ...

  9. appium问题汇总(持续更新。。。)

    WEBVIEW_unknown adb版本较低,adb 1.0.32版本不支持安卓8.x版本,更新adb版本后正常 Install homebrew ruby -e "$(curl -fsS ...

  10. javax.persistence.TransactionRequiredException: Executing an update/delete query

    最近在springboot中整合jpa的时候碰到一个异常,异常如下 javax.persistence.TransactionRequiredException: Executing an updat ...