flutter 轮播组件 Swiper

flutter_swiper

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

先放上github上的几张图看一下效果。

截图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yNhDhxPj-1573730731356)(https://github.com/jzoom/flutter_swiper/raw/master/example/res/1.gif)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lF1E8Xkq-1573730731357)(https://github.com/jzoom/flutter_swiper/raw/master/example/res/2.gif)]

图就先放到这里，我们看一下用法。

安装

增加

flutter_swiper: ^1.0.6    //请在pub上查看最新版本

到项目根目录下的 pubspec.yaml ,并且根目录运行命令行

flutter packages get 

基本使用

/*
 * Created by 李卓原 on 2018/9/19.
 * email: [email protected]
 *
 */

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class SwiperPage extends StatefulWidget {
  @override
  SwiperPageState createState() {
    return SwiperPageState();
  }
}

class SwiperPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播组件'),
      ),
      body: Container(
          width: MediaQuery.of(context).size.width,
          height: 200.0,
          child: Swiper(
            itemBuilder: _swiperBuilder,
            itemCount: 3,
            pagination: new SwiperPagination(
                builder: DotSwiperPaginationBuilder(
              color: Colors.black54,
              activeColor: Colors.white,
            )),
            control: new SwiperControl(),
            scrollDirection: Axis.horizontal,
            autoplay: true,
            onTap: (index) => print('点击了第$index个'),
          )),
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.network(
      "http://via.placeholder.com/350x150",
      fit: BoxFit.fill,
    ));
  }
}

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() 展示默认分页按钮

分页指示器 pagination

分页指示器继承自 SwiperPlugin,SwiperPlugin 为 Swiper 提供额外的界面.设置为new SwiperPagination() 展示默认分页.

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

简单的自定义：

pagination: new SwiperPagination(
                builder: DotSwiperPaginationBuilder(
              color: Colors.black54,
              activeColor: Colors.white,
            ))

完全自定义分页组件：

new Swiper(
    ...,
    pagination:new SwiperCustomPagination(
        builder:(BuildContext context, SwiperPluginConfig config){
            return new YourOwnPaginatipon();
        }
    )
);

控制按钮 control

控制按钮组件也是继承自 SwiperPlugin,设置 new 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)

SwiperController 用于控制 Swiper的index属性, 停止和开始自动播放. 通过 new SwiperController() 创建一个SwiperController实例，并保存，以便将来能使用。

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

内建的布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QLZW8mVs-1573730731358)(https://github.com/jzoom/images/raw/master/layout1.gif)]

new Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  viewportFraction: 0.8,
  scale: 0.9,
)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uVvTCCc-1573730731358)(https://github.com/jzoom/images/raw/master/layout2.gif)]

new Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  itemWidth: 300.0,
  layout: SwiperLayout.STACK,
)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fmLS4Foz-1573730731359)(https://github.com/jzoom/images/raw/master/layout3.gif)]

new Swiper(
    itemBuilder: (BuildContext context, int index) {
      return new Image.network(
        "http://via.placeholder.com/288x188",
        fit: BoxFit.fill,
      );
    },
    itemCount: 10,
    itemWidth: 300.0,
    itemHeight: 400.0,
    layout: SwiperLayout.TINDER,
 )

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZlX2K7gT-1573730731359)(https://github.com/jzoom/images/raw/master/layout4.gif)]

构建你自己的动画十分简单:

 new Swiper(
  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)
  ]),
  itemWidth: 300.0,
  itemHeight: 200.0,
  itemBuilder: (context, index) {
    return new Container(
      color: Colors.grey,
      child: new Center(
        child: new Text("$index"),
      ),
    );
  },
  itemCount: 10)

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)
  ])

文档

本文实例