Flutter Swiper製做輪播效果

一、引入flutter_swiper插件

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

Flutter_swiper的GitHub地址：https://github.com/best-flutter/flutter_swiper

瞭解flutter_swiper後，須要做的第一件事就再pubspec.yaml文件中引入這個插件（記得使用最新版）

flutter_swiper: ^1.1.6

引入後點擊Get Packages下載，或者直接保存，會自動爲咱們下載包。

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,SwiperPlugin 爲 Swiper 提供額外的界面.設置爲new SwiperPagination() 展現默認分頁.

參數	默認值	描述
alignment	Alignment.bottomCenter	若是要將分頁指示器放到其餘位置，那麼能夠修改這個參數
margin	const EdgeInsets.all(10.0)	分頁指示器與容器邊框的距離
builder	SwiperPagination.dots	目前已經定義了兩個默認的分頁指示器樣式： SwiperPagination.dots 、 SwiperPagination.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();
        }
    )
);

示例代碼以下：

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() {
    return HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @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,
    ));
  }
}

 內建的佈局

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