flutter好用的轮子推荐三-超强轮播图Swiper

前言

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。

本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网

正文

轮子

  • 轮子名称:flutter_swiper
  • 轮子概述:flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配.
  • 轮子作者:JZoom
  • 推荐指数:★★★★★
  • 常用指数:★★★★★
  • 效果预览:
效果图

安装

dependencies:
  flutter_swiper: ^1.1.6
import 'package:flutter_swiper/flutter_swiper.dart';

功能路线

1.x.x 功能实现:

  • [x] 无限循环轮播
  • [x] 控制按钮
  • [x] 分页指示器
  • [x] 非无限循环模式
  • [x] 单元测试
  • [x] 例子
  • [x] 滚动方向
  • [x] 可定制控制按钮
  • [x] 可定制分页
  • [x] 自动播放
  • [x] 控制器
  • [x] 外部分页指示器
  • [ ] 更多布局方式

用法介绍

通过widget => new Swiper()构建轮播图控件,通过不同的属性搭配不同的效果: 假设有一组图片:

List<String> imgs=[
    'http://xxxx/img1.jpg',
    'http://xxxx/img2.jpg',
    'http://xxxx/img3.jpg',
    'http://xxxx/img4.jpg'
];

默认效果

Container(
    height: 250,
    child: new Swiper(
        itemBuilder: (BuildContext context,int index){
            return new Image.network(imgs[index],fit: BoxFit.cover,);
        },
        itemCount: imgs.length,
        pagination: new SwiperPagination(),//如果不填则不显示指示点
        control: new SwiperControl(),//如果不填则不显示左右按钮
    ),
),

3D卡片滚动

Container(
    height: 250,
    child: new Swiper(
        itemBuilder: (BuildContext context, int index) {
            return new Image.network(imgs[index],fit: BoxFit.cover,);
        },
        itemCount: imgs.length,
        viewportFraction: 0.8,
        scale: 0.9,
    ),
),

无限卡片堆叠

Container(
    height: 300,
    child: new Swiper(
        itemBuilder: (BuildContext context, int index) {
            return new Image.network(imgs[index],fit: BoxFit.cover,);
        },
        itemCount: imgs.length,
        itemWidth: 300.0,
        layout: SwiperLayout.STACK,
    ),
),

无限卡片堆叠2

Container(
    height: 300,
    child: new Swiper(
        itemBuilder: (BuildContext context, int index) {
            return new Image.network(imgs[index],fit: BoxFit.cover,);
        },
        itemCount: imgs.length,
        itemWidth: 300.0,
        itemHeight: 300.0,
        layout: SwiperLayout.TINDER,
    ),
),

自定义效果

Container(
    height: 200,
    child: 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 Image.network(imgs[index],fit: BoxFit.cover,);
    },
    itemCount: imgs.length),
)

构建

基本参数

分页指示器

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

如果需要定制自己的分页指示器,那么可以这样写:

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

控制按钮

控制按钮组件也是继承自 SwiperPlugin,设置 new SwiperControl() 展示默认控制按钮.

控制器(SwiperController)

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

自动播放

所有的定制选项:github.com/jzoom/flutte

结尾

Leave a Reply

邮箱地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>