Flutter 轮播图flutter_swiper的使用

在开发应用过程中，轮播图的使用是必不可少的，其实有很多大神已经帮我们写好了，我们没有必要自己再去开发。

而开发过程中我最常使用的就是flutter_swiper这个插件，他已经为我做好了很好的处理，我们要做的就是使用。

下面就讲解一下他的简单使用

第一步、就是引用

找到 pubspec.yaml 将下面的插件引用一下

dependencies:
  flutter_swiper: ^1.1.6

版本号需要根据FlutterSDK的版本进行调节。

第二步、获取

添加玩这个代码我们就要Pub get一下，拉去一下这个插件

Pub get

到此插件的引用就完成了。

第三部、使用

首先我们要在使用的Dart文件中，应用这个插件

import 'package:flutter_swiper/flutter_swiper.dart';

接下来，就是干货了

我这以代码的形式进行讲解

Container(
          height: 150,// 这个设置轮播图的高度
          child: Swiper(
            // 设置轮播图的展示内容
            itemBuilder: (BuildContext context, int index) {
              return Container(
                //返回一个Container，Container里包裹的是image，image加载形式是网络图片，
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(// 网络图片的加载
                      imageList[index],
                    ),
                    fit: BoxFit.cover,//设置图片的展示模式，是铺满整个控件、还是按比例缩放的等
                  ),
                ),
              );
            },
            itemCount: imageList.length, // 设置轮播图的展示的数量
            // 这里是设置PageControl的样式，也就轮播图分页指示器（下面的小点）
            pagination: new SwiperPagination(
              builder: DotSwiperPaginationBuilder(
                size: 8,// 设置未选中的小点大小
                activeSize: 8,// 设置选中的小点大小
                color: ColorUtils.WHITE, // 设置为选中的小点颜色
                activeColor: ColorUtils.TEXT_ORANGE, // 设置选中的小点颜色
              ),
            ),
            control: new SwiperControl(color: Colors.pink), // 页面控制器 左右翻页按钮（不过基本都不会使用到，不使用直接设置null即可）
            scale: 0.95,// 两张图片之间的间隔
            scrollDirection: Axis.horizontal, // 设置滚动方向
            autoplay: true, // 设置是否自动滚动
            duration: 10, // 设置滚动时间间隔
            layout: SwiperLayout.STACK, // 设置轮播图展示样式（大家可以根据自己的需求自行设置）一共 { DEFAULT, STACK, TINDER, CUSTOM }四种模式
            // 点击的轮播图事件
            onTap: (index) => print('点击了第$index个'),
          ),
        ),

到此flutter_swiper这个插件所有的属性就介绍完毕了下面附上几layout几个模式的效果图

DEFAULT模式

STACK模式

 

 TINDER模式

以上就是效果图