Flutter 实现首页轮播图功能

爱情原如树叶一样，在人忽视里绿了，在忍耐里露出蓓蕾。 —— 何其芳

目录

1、pubspec.yaml 文件下引入依赖库：

2、在Widget build(BuildContext context) 函数中创建轮播图布局：

3、Swiper相关属性介绍：

4、注意事项：

---

首先做过移动开发的同学肯定有思路的。

Android开发首选控件ViewPager,IOS开发可选择UIPageControl，Flutter开发可以用flutter_swiper依赖库。

1、pubspec.yaml 文件下引入依赖库：

flutter_swiper,然后运在Termina终端运行命令flutter packages get,可以点击此链接查看最新依赖库版本号(https://pub.dev/packages/flutter_swiper)，或者运行命令flutter packages upgrade更新到最新依赖库：

flutter_swiper: ^1.0.6 #轮播图

2、在Widget build(BuildContext context) 函数中创建轮播图布局：

代码片段如下：

3、Swiper相关属性介绍：

itemCount	( count of the display items) 显示的轮播图数量，可以为0，也可以为图片数组长度，可灵活增加或减少。
itemBuilder	（Build item on index）轮播图每一项，表示一个Wdiget
pagination	分页插件
DotSwiperPaginationBuilder	圆点插件，
color	圆点初始化颜色
activeColor	圆点被选中时，或者切换到当前轮播图时圆点颜色值
controller
scrollDirection	轮播图或者圆点滚动方向，是个枚举值(Axis.Left或者Axis.right)
autoplay	是否自动滚动（这个值需要灵活控制）
onTap:(index) =>	表示点击了某一项

4、注意事项：

轮播的滚动开始和停止需要跟State的生命周期结合，当当前State处于不可见或者处于后台时，需要对轮播图滚动的状态进行停止。

当前State被覆盖的时候，执行生命周期deactivate()函数，autoplay的值修改成false【若是自动滚动为true】。