1. 程式人生 > >flutter 輪播元件 Swiper

flutter 輪播元件 Swiper

flutter_swiper

flutter最強大的siwiper, 多種佈局方式,無限輪播,Android和IOS雙端適配.

先放上github上的幾張圖看一下效果。

✨✨ 新功能

更多

截圖

Horizontal Vertical

圖就先放到這裡,我們看一下用法。

安裝

增加

flutter_swiper: ^1.0.6    //請在pub上檢視最新版本

到專案根目錄下的 pubspec.yaml ,並且根目錄執行命令列

flutter packages get 

基本使用

/*
 * Created by 李卓原 on 2018/9/19.
 * email: [email protected]
 *
 */

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基本引數

引數 預設值 描述
scrollDirection Axis.horizontal 滾動方向,設定為Axis.vertical如果需要垂直滾動
loop true 無限輪播模式開關
index 0 初始的時候下標位置
autoplay false 自動播放開關.
autoplayDely 3000 自動播放延遲毫秒數.
autoplayDiableOnInteraction true 當用戶拖拽的時候,是否停止自動播放.
onIndexChanged void onIndexChanged(int index) 當用戶手動拖拽或者自動播放引起下標改變的時候呼叫
onTap void onTap(int index) 當用戶點選某個輪播的時候呼叫
duration 300.0 動畫時間,單位是毫秒
pagination null 設定 new SwiperPagination() 展示預設分頁指示器
control null 設定 new SwiperControl() 展示預設分頁按鈕

分頁指示器 pagination

分頁指示器繼承自 SwiperPlugin,SwiperPluginSwiper 提供額外的介面.設定為new SwiperPagination() 展示預設分頁.

引數 預設值 描述
alignment Alignment.bottomCenter 如果要將分頁指示器放到其他位置,那麼可以修改這個引數
margin const EdgeInsets.all(10.0) 分頁指示器與容器邊框的距離
builder SwiperPagination.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() 展示預設控制按鈕.

引數 預設值 描述
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() 停止自動播放

內建的佈局

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

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

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

構建你自己的動畫十分簡單:


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