frc 96f51669f428a307d6e7293de59486ea - Flutter 插件笔记 | 轮播图 flutter_swiper |

机缘巧合,我了解到 packages 下的轮播组件 swiper,记录一下。

packages 链接:flutter_swiper
Github 链接:best-flutter/flutter_swiper

Get

 在项目目录中的pubspec.yaml文件中的dependencies里导入flutter_swiper: ^1.1.6。运行flutter packages get

dependencies:
   # 最新的版本,版本会迭代,需保持最新的
   flutter_swiper: ^1.1.6

属性解读(常用)

Swiper(
  scrollDirection: Axis.horizontal,// 方向 Axis.horizontal  Axis.vertical
  itemCount: 4, // 展示数量
  autoplay: true,// 自动翻页
  itemBuilder:(){...},// 布局构建
  onTap:(){...}, // 点击时间
  pagination: SwiperPagination(), // 分页指示
  viewportFraction: 0.8, // 视窗比例
  layout: SwiperLayout.STACK, // 布局方式 
  itemWidth: MediaQuery.of(context).size.width, // 条目宽度
  itemHeight: MediaQuery.of(context).size.height, // 条目高度
  autoplayDisableOnInteraction: true, // 用户进行操作时停止自动翻页
  loop: true, // 无线轮播
  indicatorLayout: PageIndicatorLayout.SLIDE, // 指标布局 试了半天也没试出来这是啥
)

使用示例

 在这展示几个小栗子,可直接拿去复制。

示例一 四张图片 自动翻页 左右控制按钮 页面指示器(点)

frc 7caf099e2acefb250ebdca7c863d4afe - Flutter 插件笔记 | 轮播图 flutter_swiper |

 去掉control:属性,图上的左右控制翻页按钮就会消失了。

Container(
  height: ScreenUtil().setHeight(300), // 高度 插件 flutter_screenutil
  child: Swiper(
    scrollDirection: Axis.horizontal,// 横向
    itemCount: 4,// 数量
    autoplay: true, // 自动翻页
    itemBuilder: (BuildContext context, int index) {
      return Image.network("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=500542857,4026327610&fm=26&gp=0.jpg",
        fit: BoxFit.fill);
    }, // 构建
    onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
    pagination: SwiperPagination(// 分页指示器
      alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中间
      margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),// 距离调整
      builder: DotSwiperPaginationBuilder( // 指示器构建
        space: ScreenUtil().setWidth(5),// 点之间的间隔
        size: ScreenUtil().setWidth(10), // 没选中时的大小
        activeSize: ScreenUtil().setWidth(12),// 选中时的大小
        color: Colors.black54,// 没选中时的颜色
        activeColor: Colors.white)),// 选中时的颜色
    control: new SwiperControl(color: Colors.pink), // 页面控制器 左右翻页按钮
    scale: 0.95,// 两张图片之间的间隔
    ),
 ),

示例二 四张图片 自动翻页 页面指示器(数字)

frc 9d1d568ed5431a3fe5b81f15765722a1 - Flutter 插件笔记 | 轮播图 flutter_swiper |
Container(
  height: ScreenUtil().setHeight(300), // 高度
  child: Swiper(
    scrollDirection: Axis.horizontal,// 横向
    itemCount: imageList.length,// 数量
    autoplay: true,// 自动翻页
    itemBuilder: (BuildContext context, int index) {return imageList[index];},// 构建
    onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
    // 分页指示器
    pagination: SwiperPagination(
        alignment: Alignment.bottomRight,// 位置 Alignment.bottomCenter 底部中间
        margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),// 距离调整
        builder: FractionPaginationBuilder( // 指示器构建
          color: Colors.white,// 字体颜色
          activeColor: Colors.yellow, // 当前的指示字体颜色
          fontSize: ScreenUtil().setSp(30),// 字体大小
          activeFontSize: ScreenUtil().setSp(35),// 当前的指示字体大小
        )
    ),
    scale: 0.95,// 两张图片之间的间隔
  ),
)

示例三

frc fe34583d43806d414a43dd255509c5f8 - Flutter 插件笔记 | 轮播图 flutter_swiper |
Container(
  color: Colors.black,
  padding: const EdgeInsets.only(top: 10),
  height: ScreenUtil().setHeight(380), // 高度
  child: Swiper(
    scrollDirection: Axis.horizontal, // 横向
    itemCount: 4,// 数量
    autoplay: true,// 自动翻页
    itemBuilder: (BuildContext context, int index) {// 构建
      return Container(
        margin: const EdgeInsets.only(bottom: 30),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3932546523,304539533&fm=26&gp=0.jpg'),
                     fit: BoxFit.fill),
                borderRadius: BorderRadius.all(Radius.circular(10))),
      );
    },
    onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
    pagination: SwiperPagination( // 分页指示器
        alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中间
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距离调整
        builder: DotSwiperPaginationBuilder(
          activeColor: Colors.yellow,
          color: Colors.white,
          size: ScreenUtil().setWidth(15),
          activeSize: ScreenUtil().setWidth(25),
          space: ScreenUtil().setWidth(10),
       )),
    viewportFraction: 0.8,// 当前视窗展示比例 小于1可见上一个和下一个视窗
    scale: 0.8, // 两张图片之间的间隔
  ),
)

示例四

frc 565e1c4f3c46d94e4781d0b1b3d3cc6b - Flutter 插件笔记 | 轮播图 flutter_swiper |

 代码中的_imageHttpsList是一个存储了四个图片链接List

Container(
  color: Colors.black,
  padding: const EdgeInsets.only(top: 10),
  height: ScreenUtil().setHeight(380), // 高度
  child: Swiper(
    scrollDirection: Axis.horizontal, // 横向
    itemCount: _imageHttpsList.length,// 数量
    autoplay: false,// 自动翻页
    itemBuilder: (BuildContext context, int index) {// 构建
      return Container(
        margin: const EdgeInsets.only(bottom: 30),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(_imageHttpsList[index]),fit: BoxFit.fill),
            borderRadius: BorderRadius.all(Radius.circular(10))),
      );
    },
    onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
    pagination: SwiperPagination( // 分页指示器
        alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中间
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距离调整
        builder: FractionPaginationBuilder(
          activeColor: Colors.yellow,
          color: Colors.white,
          fontSize: ScreenUtil().setSp(15),
          activeFontSize: ScreenUtil().setSp(25),
       )),
    viewportFraction: 0.8,// 当前视窗展示比例 小于1可见上一个和下一个视窗
    scale: 0.8, // 两张图片之间的间隔
    layout: SwiperLayout.TINDER,
    itemWidth: MediaQuery.of(context).size.width,
    itemHeight: MediaQuery.of(context).size.height,
  ),
)

示例五

frc 29493411d6ec690818e8a765102d1eff - Flutter 插件笔记 | 轮播图 flutter_swiper |

 这里面有个很神奇的地方itemWidth: MediaQuery.of(context).size.width - 100,以后某些特殊的宽度可以这样设置。

Container(
  color: Colors.black,
  padding: const EdgeInsets.only(top: 10),
  height: ScreenUtil().setHeight(380), // 高度
  child: Swiper(
    scrollDirection: Axis.horizontal, // 横向
    itemCount: _imageHttpsList.length,// 数量
    autoplay: false,// 自动翻页
    itemBuilder: (BuildContext context, int index) {// 构建
      return Container(
        margin: const EdgeInsets.only(bottom: 30),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    _imageHttpsList[index]),
                fit: BoxFit.fill),
            borderRadius: BorderRadius.all(Radius.circular(10))),
      );
    },
    onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
    pagination: SwiperPagination( // 分页指示器
        alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中间
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距离调整
        builder: FractionPaginationBuilder(
          activeColor: Colors.yellow,
          color: Colors.white,
          fontSize: ScreenUtil().setSp(15),
          activeFontSize: ScreenUtil().setSp(25),
        )),
    viewportFraction: 0.8,// 当前视窗展示比例 小于1可见上一个和下一个视窗
    scale: 0.8, // 两张图片之间的间隔
    layout: SwiperLayout.STACK,
    itemWidth: MediaQuery.of(context).size.width - 100,
    itemHeight: MediaQuery.of(context).size.height,
  ),
)

示例六

frc dfe1aa32468a77158c2b83e0eff81198 - Flutter 插件笔记 | 轮播图 flutter_swiper |

 这个只是把示例五的scrollDirection改成Axis.vertical

Container(
  ...
  child: Swiper(
    scrollDirection: Axis.vertical, // 竖向
    ...
  ),
)

Flutter 插件笔记 | 轮播图 flutter_swiper |