前言

Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶(hù)界面娄蔼。

IT界著名的尼古拉斯·高爾包曾說(shuō)：輪子是IT進(jìn)步的階梯岁诉！熱門(mén)的框架千篇一律涕癣，好用輪子萬(wàn)里挑一前标！Flutter作為這兩年開(kāi)始崛起的跨平臺(tái)開(kāi)發(fā)框架，其第三方生態(tài)相比其他成熟框架還略有不足只搁，但輪子的數(shù)量也已經(jīng)很多了氢惋。本系列文章挑選日常app開(kāi)發(fā)常用的輪子分享出來(lái)洞翩，給大家提高搬磚效率骚亿，同時(shí)也希望flutter的生態(tài)越來(lái)越完善来屠，輪子越來(lái)越多震鹉。

本系列文章準(zhǔn)備了超過(guò)50個(gè)輪子推薦，工作原因嫂粟，盡量每1-2天出一篇文章墨缘。

tip:本系列文章合適已有部分flutter基礎(chǔ)的開(kāi)發(fā)者，入門(mén)請(qǐng)戳：flutter官網(wǎng)

正文

輪子

• 輪子名稱(chēng)：flutter_swiper
• 輪子概述：flutter最強(qiáng)大的siwiper, 多種布局方式宽涌，無(wú)限輪播卸亮，Android和IOS雙端適配.
• 輪子作者：JZoom
• 推薦指數(shù)：★★★★★
• 常用指數(shù)：★★★★★

• 效果預(yù)覽：

  
  
  效果圖

安裝

dependencies:
  flutter_swiper: ^1.1.6

import 'package:flutter_swiper/flutter_swiper.dart';

功能路線(xiàn)

1.x.x 功能實(shí)現(xiàn)：

• 無(wú)限循環(huán)輪播
• 控制按鈕
• 分頁(yè)指示器
• 非無(wú)限循環(huán)模式
• 單元測(cè)試
• 例子
• 滾動(dòng)方向
• 可定制控制按鈕
• 可定制分頁(yè)
• 自動(dòng)播放
• 控制器
• 外部分頁(yè)指示器
• 更多布局方式

用法介紹

通過(guò)widget => new Swiper(）構(gòu)建輪播圖控件兼贸，通過(guò)不同的屬性搭配不同的效果：
假設(shè)有一組圖片：

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

默認(rèn)效果

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(),//如果不填則不顯示指示點(diǎn)
        control: new SwiperControl(),//如果不填則不顯示左右按鈕
    ),
),

3D卡片滾動(dòng)

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

無(wú)限卡片堆疊

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

無(wú)限卡片堆疊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),
)

構(gòu)建

基本參數(shù)

分頁(yè)指示器

分頁(yè)指示器繼承自 SwiperPlugin,SwiperPlugin 為 Swiper 提供額外的界面.設(shè)置為new SwiperPagination() 展示默認(rèn)分頁(yè).

如果需要定制自己的分頁(yè)指示器，那么可以這樣寫(xiě)：

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

控制按鈕

控制按鈕組件也是繼承自 SwiperPlugin,設(shè)置 new SwiperControl() 展示默認(rèn)控制按鈕.

控制器(SwiperController)

SwiperController 用于控制 Swiper的index屬性, 停止和開(kāi)始自動(dòng)播放. 通過(guò) new SwiperController() 創(chuàng)建一個(gè)SwiperController實(shí)例酌呆，并保存搔耕，以便將來(lái)能使用。

自動(dòng)播放

所有的定制選項(xiàng)：https://github.com/jzoom/flutter_swiper/blob/master/example/lib/src/ExampleCustom.dart

結(jié)尾

• 輪子倉(cāng)庫(kù)地址：https://pub.flutter-io.cn/packages/flutter_swiper
• 系列演示demo源碼：https://github.com/826327700/flutter_plugins_demo