Flutter Swiper制作輪播效果

1、引入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)
  ])