flutter 輪播元件 Swiper
阿新 • • 發佈:2018-12-10
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基本引數
引數 | 預設值 | 描述 |
---|---|---|
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();
}
)
);
控制按鈕 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)
])