flutter_swiper最强大的swiper, 多种布局方式,无限轮播,Android和IOS双端适配.

1、在pubspec.yaml引入flutter_swiper

flutter_swiper: ^1.1.6

记得执行

flutter pub get

2、引用

import 'package:flutter_swiper/flutter_swiper.dart';

3、使用

    Swiper(
      itemBuilder: (BuildContext context,int index){
        // 配置图片地址
        return new Image.network(productModel.headImages[index],fit: BoxFit.fill,);
      },
      // 配置图片数量
      itemCount: productModel.headImages.length ,
      // 底部分页器
      pagination: new SwiperPagination(),
      // 左右箭头
      control: new SwiperControl(),
      // 无限循环
      loop: true,
      // 自动轮播
      autoplay: true,
    )

4、效果图
在这里插入图片描述
5、Swiper基本参数

参数默认值描述
scrollDirectionAxis.horizontal滚动方向,如果需要垂直滚动设置为Axis.vertical
looptrue无限轮播模式开关
index0初始的时候下标位置
autoplayfalse自动播放开关
autoplayDely3000自动播放延迟毫秒数
autoplayDiableOnInteractiontrue当用户拖拽的时候,是否停止自动播放
onIndexChangedvoid onIndexChanged(int index)当用户手动拖拽或者自动播放引起下标改变的时候调用
onTapvoid onTap(int index)当用户点击某个轮播的时候调用
duration300.0动画时间,单位是毫秒
paginationnull设置 new SwiperPagination() 展示默认分页指示器
controlnull设置 new SwiperControl() 展示默认分页按钮

6、分页指示器 SwiperPagination 参数

参数默认值描述
alignmentAlignment.bottomCenter如果要将分页指示器放到其他位置,那么可以修改这个参数
marginEdgeInsets.all(10.0)分页指示器与容器边框的距离
builderSwiperPagination.dots两个默认的分页指示器样式: SwiperPagination.dots 、 SwiperPagination.fraction(可自定义)

7、控制按钮 SwiperControl 参数

参数默认值描述
iconPreviousIcons.arrow_back_ios上一页的IconData
iconNextIcons.arrow_forward_ios下一页的IconData
colorTheme.of(context).primaryColor控制按钮颜色
size30.0控制按钮的大小
paddingconst EdgeInsets.all(5.0)控制按钮与容器的距离

控制器(SwiperController)可使用方法

方法描述
void move(int index, {bool animation: true})移动到指定下标,设置是否播放动画
void next({bool animation: true})下一页
void previous({bool animation: true})上一页
void startAutoplay()开始自动播放
void stopAutoplay()停止自动播放
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐