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 功能實現：

• 無限循環輪播
• 控制按鈕
• 分頁指示器
• 非無限循環模式
• 單元測試
• 例子
• 滾動方向
• 可定製控制按鈕
• 可定製分頁
• 自動播放
• 控制器
• 外部分頁指示器
• 更多佈局方式

用法介紹

經過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),
)
複製代碼

構建

基本參數

參數	默認值	描述
scrollDirection	Axis.horizontal	滾動方向，設置爲Axis.vertical若是須要垂直滾動
loop	true	無限輪播模式開關
index	0	初始的時候下標位置
autoplay	false	自動播放開關.
onIndexChanged	void onIndexChanged(int index)	當用戶手動拖拽或者自動播放引發下標改變的時候調用
onTap	void onTap(int index)	當用戶點擊某個輪播的時候調用
duration	300.0	動畫時間，單位是毫秒
pagination	null	設置 new SwiperPagination() 展現默認分頁指示器
control	null	設置 new SwiperControl() 展現默認分頁按鈕

分頁指示器

分頁指示器繼承自 SwiperPlugin,SwiperPlugin 爲 Swiper 提供額外的界面.設置爲new SwiperPagination() 展現默認分頁.

參數	默認值	描述
alignment	Alignment.bottomCenter	若是要將分頁指示器放到其餘位置，那麼能夠修改這個參數
margin	const EdgeInsets.all(10.0)	分頁指示器與容器邊框的距離
builder	SwiperPagination.dots	目前已經定義了兩個默認的分頁指示器樣式： SwiperPagination.dots 、 SwiperPagination.fraction，均可以作進一步的自定義.

若是須要定製本身的分頁指示器，那麼能夠這樣寫：

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

複製代碼

控制按鈕

控制按鈕組件也是繼承自 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()	中止自動播放

自動播放

參數	默認值	描述
autoplayDely	3000	自動播放延遲毫秒數.
autoplayDisableOnInteraction	true	當用戶拖拽的時候，是否中止自動播放.

全部的定製選項：github.com/jzoom/flutt…

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/fl…
• 系列演示demo源碼：github.com/826327700/f…