Flutter学习日记之Flutter_swiper实现轮播图功能

Posted 2021-06-30 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/118230001,转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

希望，只有和勤奋作伴，才能如虎添翼。

今天分享的内容是关于图片轮播的实现，使用到的库是flutter_swiper，如果有出现空检查报错的，可以使用flutter_swiper_null_safety，源码地址：https://gitee.com/fjjxxy/flutter-study.git，
有可能的报错如下：

Null check operator used on a null value

轮播图效果如下：

先贴出基本参数详解：

参数	说明
itemBuilder	列表的构造
indicatorLayout	指示器的类型，如带颜色的、可以放大的等等
itemCount	轮播列表的数量
autoplay	是否自动轮播
layout	构建轮播的布局
autoplayDelay	自动轮播之间的间隔
duration	轮播动画时长
onIndexChanged	轮播切换的监听
index	初始位置
onTap	轮播的点击事件
control	左右箭头
loop	是否循环轮播
scrollDirection	轮播方向
pagination	指示器样式
customLayoutOption	动画效果
viewportFraction	当前视窗比例，小于1时就会在屏幕内，可以看见旁边的轮播图
itemHeight	单个轮播的高度
itemWidth	单个轮播的宽度
scale	轮播图之间的间距

（一）添加依赖并引入

添加依赖：

flutter_swiper: ^1.1.6

或

  flutter_swiper_null_safety: ^1.0.2

引入：

import 'package:flutter_swiper/flutter_swiper.dart';

或

import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

（二）普通的横向/竖向轮播，效果如开头gif中的第一种和第三种

代码如下：

 Swiper(
                  itemCount: _imageList.length,
                  itemBuilder: (context, index) {
                    return Image.network(
                      _imageList[index],
                      fit: BoxFit.cover,
                    );
                  },
                  autoplay: true,
                  //自动轮播
                  onIndexChanged: (index) {},
                  //引起下标变化的监听
                  onTap: (index) {},
                  //点击轮播时调用
                  duration: 1000,
                  //切换时的动画时间
                  autoplayDelay: 2000,
                  //自动播放间隔毫秒数.
                  autoplayDisableOnInteraction: false,
                  loop: true,
                  //是否无限轮播
                  scrollDirection: Axis.horizontal,
                  //滚动方向
                  index: 0,
                  //初始下标位置
                  scale: 0.6,
                  //轮播图之间的间距
                  viewportFraction: 0.8,
                  //当前视窗比例，小于1时就会在屏幕内，可以看见旁边的轮播图
                  indicatorLayout: PageIndicatorLayout.COLOR,
                  pagination: new SwiperPagination(),
                  //底部指示器
                  control: new SwiperControl(), //左右箭头
                )

换成竖直轮播的代码如下：

   //滚动方向
   scrollDirection: Axis.vertical

以上效果会有缩放的样式，如果想要普通的不进行缩放的，可以将以下参数删除：

  scale: 0.6,
                  //轮播图之间的间距
                  viewportFraction: 0.8,
                  //当前视窗比例，小于1时就会在屏幕内，可以看见旁边的轮播

（三）效果图中的第二种

使用下方的参数实现效果：

 layout: SwiperLayout.TINDER

其他的参数和上面的情况一致

（四）效果图中的第四种，带有自定义动画的

代码如下:

 Swiper(
                  itemWidth: 300,
                  itemHeight: 200,
                  layout: SwiperLayout.CUSTOM,
                  customLayoutOption: new CustomLayoutOption(
                          startIndex: -1, stateCount: 3)
                      .addRotate([-45.0 / 180, 0.0, 45.0 / 180]).addTranslate([
                    new Offset(-370.0, -40.0),
                    new Offset(0.0, 0.0),
                    new Offset(370.0, -40.0)
                  ]),
                  autoplay: true,
                  duration: 2000,
                  itemBuilder: (context, index) {
                    return new Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          image: DecorationImage(
                              image: NetworkImage(_imageList[index]),
                              fit: BoxFit.fill)),
                    );
                  },
                  itemCount: _imageList.length,
                  indicatorLayout: PageIndicatorLayout.COLOR,
                  pagination: SwiperPagination(
                      alignment: Alignment.bottomCenter,
                      builder: FractionPaginationBuilder(
                          activeColor: Colors.grey,
                          color: Colors.black,
                          fontSize: 20,
                          activeFontSize: 25)),
                  //底部指示器
                )

customLayoutOption用来自定义位移与旋转的动画

（五）自定义指示器

参数	说明
pagination	定义指示器，对应的是SwiperPagination组件

SwiperPagination组件的参数如下：

参数	说明
alignment	指示器的位置
margin	指示器与父组件的间距
builder	指示器的样式，对应的是SwiperPlugin的子类

builder对应的组件主要有以下几种：

• FractionPaginationBuilder 数字指示器

  builder: FractionPaginationBuilder(
                          activeColor: Colors.grey,
                          color: Colors.black,
                          fontSize: 20,
                          activeFontSize: 25)

• RectSwiperPaginationBuilder 矩形指示器

 builder: RectSwiperPaginationBuilder(
                          activeColor: Colors.red,
                          color: Colors.grey,
                          size: Size(20, 10),
                          activeSize: Size(20, 10))),

• DotSwiperPaginationBuilder 圆形指示器

              builder: DotSwiperPaginationBuilder(
                  color: Colors.grey,
                  activeColor: Colors.red,
                  size: 10.0,
                  activeSize: 20.0,
                  space: 5.0)

到此为止，使用flutter_swiper实现轮播效果就介绍完了，要是觉得有用记得点个赞，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个Star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!