flutter中实现轮播图

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基本参数

参数	默认值	描述
scrollDirection	Axis.horizontal	滚动方向，如果需要垂直滚动设置为Axis.vertical
loop	true	无限轮播模式开关
index	0	初始的时候下标位置
autoplay	false	自动播放开关
autoplayDely	3000	自动播放延迟毫秒数
autoplayDiableOnInteraction	true	当用户拖拽的时候，是否停止自动播放
onIndexChanged	void onIndexChanged(int index)	当用户手动拖拽或者自动播放引起下标改变的时候调用
onTap	void onTap(int index)	当用户点击某个轮播的时候调用
duration	300.0	动画时间，单位是毫秒
pagination	null	设置 new SwiperPagination() 展示默认分页指示器
control	null	设置 new SwiperControl() 展示默认分页按钮

6、分页指示器 SwiperPagination 参数

参数	默认值	描述
alignment	Alignment.bottomCenter	如果要将分页指示器放到其他位置，那么可以修改这个参数
margin	EdgeInsets.all(10.0)	分页指示器与容器边框的距离
builder	SwiperPagination.dots	两个默认的分页指示器样式： SwiperPagination.dots 、 SwiperPagination.fraction（可自定义）

7、控制按钮 SwiperControl 参数

参数	默认值	描述
iconPrevious	Icons.arrow_back_ios	上一页的IconData
iconNext	Icons.arrow_forward_ios	下一页的IconData
color	Theme.of(context).primaryColor	控制按钮颜色
size	30.0	控制按钮的大小
padding	const 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()	停止自动播放

flutter中实现轮播图

猜你喜欢