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: zhuoyuan93@gmail.com
 *
 */

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

参数默认值描述
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() 展示默认分页按钮

分页指示器 pagination

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

参数默认值描述
alignmentAlignment.bottomCenter如果要将分页指示器放到其他位置,那么可以修改这个参数
marginconst EdgeInsets.all(10.0)分页指示器与容器边框的距离
builderSwiperPagination.dots目前已经定义了两个默认的分页指示器样式: SwiperPagination.dotsSwiperPagination.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() 展示默认控制按钮.

参数默认值描述
iconPreviousIcons.arrow_back_ios上一页的IconData
iconNextIcons.arrow_forward_ios下一页的IconData
colorTheme.of(context).primaryColor控制按钮颜色
size30.0控制按钮的大小
paddingconst 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)
  ])

文档

本文实例

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页