【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
文章目录
- 一、flutter_swiper 插件
- 二、Swiper 组件使用
- 三、完整代码示例
- 四、相关资源
一、flutter_swiper 插件
到 https://pub.dev/packages 搜索 flutter_swiper 组件 https://pub.dev/packages/flutter_swiper ;
安装 flutter_swiper 插件 :
① 配置 Flutter 插件 : 在 pubspec.yaml 配置文件中配置 Flutter 插件 :
dependencies:flutter_swiper: ^1.1.6
② 获取 Flutter 插件 : 点击右上角的 " Pub get " 按钮 , 获取插件 , 此时会自动从 https://pub.dev/packages 平台下载该插件并配置到 Flutter 项目中 ;
③ 在项目中引入 : 在需要使用 Banner 轮播插件 flutter_swiper 的组件代码中导入该 dart 包 ;
import 'package:flutter_swiper/flutter_swiper.dart';
二、Swiper 组件使用
安装 flutter_swiper 插件包后 , 在 dart 源码中导入该插件包 ,
import 'package:flutter_swiper/flutter_swiper.dart';
即可在相应的 dart 文件中使用 Swiper 组件 ;
主要设置 Swiper 如下四个参数 :
① int itemCount : 轮播图的数量 , 就是有几张图片在轮播状态 ;
② bool autoplay : 是否自动轮播图片 ;
③ IndexedWidgetBuilder itemBuilder : 设置轮播组件 , 注意 IndexedWidgetBuilder 类型是一个方法 , 该方法返回 Widget 组件 ;
typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);
④ SwiperPlugin pagination : 轮播指示器 , 轮播组件下面的小圆点 ;
代码示例 :
Swiper(/// 轮播图数量itemCount: _imageUrls.length,/// 设置轮播图自动播放autoplay: true,/// 轮播条目组件itemBuilder: (BuildContext context, int index) {return Image.network(/// 图片 URL 链接_imageUrls[index],/// 缩放方式fit: BoxFit.fill,);},/// 轮播图指示器pagination: SwiperPagination(),
),
三、完整代码示例
完整代码示例 :
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';/// 应用主界面
class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {List _imageUrls = ["https://img-blog.csdnimg.cn/20210401205234582.png","https://img-blog.csdnimg.cn/20210401205307863.png","https://img-blog.csdnimg.cn/20210401205249606.png"];@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中组件body: Center(child: Column(children: [Container(/// 设置 Banner 轮播图 160 像素height: 200,/// 这是 flutter_swiper 插件的轮播图child: Swiper(/// 轮播图数量itemCount: _imageUrls.length,/// 设置轮播图自动播放autoplay: true,/// 轮播条目组件itemBuilder: (BuildContext context, int index) {return Image.network(/// 图片 URL 链接_imageUrls[index],/// 缩放方式fit: BoxFit.fill,);},/// 轮播图指示器pagination: SwiperPagination(),),),],),),);}
}
运行效果 :
四、相关资源
参考资料 :
- Flutter 官网 : https://flutter.dev/
- Flutter 插件下载地址 : https://pub.dev/packages
- Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
- 官方 GitHub 地址 : https://github.com/flutter
- Flutter 中文社区 : https://flutter.cn/
- Flutter 实用教程 : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart 中文文档 : https://dart.cn/
- Dart 开发者官网 : https://api.dart.dev/
- Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
- GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
- Flutter 实战电子书 : https://book.flutterchina.club/chapter1/
重要的专题 :
- Flutter 动画参考文档 : https://flutterchina.club/animations/
博客源码下载 :
GitHub 地址 : https://github.com/han1202012/flutter_app ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/16311756 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )相关推荐
- banner轮播图切换插件
下载地址 banner轮播图切换插件,基于jquery实现的图片轮播效果. dd:
- Flutter banner轮播图之Swiper
文章目录 关于Swiper 示例并讲解 基础使用 分页控制器 显示样式 指示器 点击事件 高度自适应 完整代码 详细属性 基本参数 分页指示器 控制按钮 控制器(SwiperController) 轮 ...
- 微信小程序开发 | 02 - 轮播图实现(swiper组件)
一.实现思路 轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...
- 纯javascript轮播滑动特效插件Swiper
Swiper 的每个展示块(屏)为一个slide,slide中放置图片或文字等展示的内容,全部slide排成一行(或多行)包含在包装器wrapper中,而总容器container 又包裹着wrappe ...
- Mint-UI 移动首页开发 - header导航、banner轮播图
Mint-UI 移动首页style排版问题:header导航.banner轮播图.footer底部版权··· ··· 资源预览: 中文 2.x官方文档(含演示地址): 文档首页 中文 2.x官方文档( ...
- html中制作banner,css banner轮播图怎么做?
css banner轮播图怎么做?下面本篇文章给大家简单介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 初步了解动画效果吧.轮播图我一直以为靠jquery插件完成的,突然发 ...
- H5页面中的视频轮播(类似于banner轮播图效果)
先说下我的需求,如下图: 手机模型中间部分是视频播放,当一条视频播放完毕后,整屏会自动上滑切换到下一个视频. 详细效果展示请在PC端点击:http://www.17jianyue.cn/ 查看 提起轮 ...
- php轮播代码生成器,最简单的Banner轮播左右切换效果代码及实现思路(附带源码)...
Banner轮播左右切换效果代码及实现思路,支持左右切换图片,支持点击选择对应的图片.实现思路通过定时器去自动选图和点击触发事件去选择图片.而图片的选择是通过计算对应图片的宽度和第几张图的距离进行动画 ...
- jQuery图片轮播(焦点图)插件(转载)
本文转自http://www.oschina.net/code/snippet_206691_11515?p=3#comments 特点:兼容IE6+,Chrome,Firefox,Opera,saf ...
最新文章
- Web应用主动侦测工具Skipfish
- bzoj1212: [HNOI2004]L语言
- [现代操作系统] 考前突击
- menu什么意思中文意思_proclaim什么意思
- 南阳医专计算机专业代码,南阳医学高等专科专业招生代码
- 小猿圈之python的输入和输出
- 自定义构建基于.net core 的基础镜像
- linux mysql关闭启动不了了,linux启动或关闭mysql失败的解决办法
- 平顶山学院计算机分数线,2016年平顶山学院艺术类专业录取分数线
- Java替代C语言的可能性
- 米勒机会信托或将通过GBTC投资比特币
- 智联招聘基于Apache Pulsar打造企业级事件中心
- 微信小程序原生实现好看的日期选择插件-万年历
- 数据结构 课堂测验错题_200911
- 2015年11月小结
- iphone7刷入linux,iPhone7怎么进入DFU模式 iPhone7刷机步骤【详解】
- 实验4-1-12 黑洞数 (20 分)
- 金蝶KIS标准版会计期间超过三期。。。
- 从中序与后序构造二叉树
- 常见软路由 NAS 低功耗处理器的对比 截至2020-12 英特尔