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…