flutter_swiper

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

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

✨✨ 新功能

更多

截圖

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

安裝

增加

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

分頁指示器 pagination

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

簡單的自定義：

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() 展示預設控制按鈕.

控制器(SwiperController)

SwiperController 用於控制 Swiper的index屬性, 停止和開始自動播放. 通過 new SwiperController() 建立一個SwiperController例項，並儲存，以便將來能使用。

內建的佈局

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