樣式一
先看效果圖：
實現方式
引入flutter_swiper庫
flutter_swiper利用的是這個庫，可以實現多樣式的佈局。先說說庫的匯入。
之前的文章有提到過本地圖片的載入方式，是進入到pubspec.yaml檔案裡新增，同時，引入三方庫也是一樣。
flutter_swiper: ^1.0.6
然後到專案的目錄下執行下面命令列 (這個過程可能會等一會，反正我是等了一會)
flutter packages get
等到提示完成的時候，那麼這個庫就匯入完成了，下面看具體的實現。
具體程式碼實現
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart'; // 引入標頭檔案
class SwiperView extends StatefulWidget {
@override
_SwiperViewState createState() => _SwiperViewState();
}
class _SwiperViewState extends State<SwiperView> {
// 宣告一個list，存放image Widget
List<Widget> imageList = List();
@override
void initState() {
imageList
..add(Image.network(
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2726034926,4129010873&fm=26&gp=0.jpg',
fit: BoxFit.fill,
))
..add(Image.network(
'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3485348007,2192172119&fm=26&gp=0.jpg',
fit: BoxFit.fill,
))
..add(Image.network(
'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2594792439,969125047&fm=26&gp=0.jpg',
fit: BoxFit.fill,
))
..add(Image.network(
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=190488632,3936347730&fm=26&gp=0.jpg',
fit: BoxFit.fill,
));
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black12,
appBar: AppBar(title: Text('輪播圖'),),
body: ListView( // 這裡使用listView是因為本地寫了幾組不同樣式的展示，太懶了，所以這裡就沒有改
children: <Widget>[
firstSwiperView()
],
)
);
}
Widget firstSwiperView() {
return Container(
padding: const EdgeInsets.fromLTRB(0, 50, 0, 5),
width: MediaQuery.of(context).size.width,
height: 300,
child: Swiper(
itemCount: 4,
itemBuilder: _swiperBuilder,
pagination: SwiperPagination(
alignment: Alignment.bottomRight,
margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),
builder: DotSwiperPaginationBuilder(
color: Colors.black54,
activeColor: Colors.white
)
),
controller: SwiperController(),
scrollDirection: Axis.horizontal,
autoplay: true,
onTap: (index) => print('點選了第$index'),
),
);
}
Widget _swiperBuilder(BuildContext context, int index) {
return (imageList[index]);
}
}
複製程式碼下面介紹一下幾個常用的Swiper屬性：
Swiper({
this.itemBuilder,
this.indicatorLayout: PageIndicatorLayout.NONE,
///
this.transformer,
@required this.itemCount, // 個數
this.autoplay: false, // 是否自動播放，預設false
this.layout: SwiperLayout.DEFAULT, // 設定樣式，後面會介紹，default就是上面輪播的樣式
this.autoplayDelay: kDefaultAutoplayDelayMs,
this.autoplayDisableOnInteraction: true, // 使用者拖拽的時候，是否停止自動播放
this.duration: kDefaultAutoplayTransactionDuration, // 動畫時間，預設300.0毫秒
this.onIndexChanged, // 當使用者手動拖拽或自動播放引起下標改變的時候呼叫
this.index, // 初始播放輪播時的下標位置
this.onTap, // 點選輪播的事件
this.control, // 分頁按鈕（一般是左右或上下兩邊的箭頭按鈕）
this.loop: true, // 無限輪播模式開關
this.curve: Curves.ease, // 動畫的方式
this.scrollDirection: Axis.horizontal, // 滾動方式
this.pagination, // 分頁指示器（下面跟著滾動的點）
this.plugins,
this.physics,
Key key,
this.controller,
this.customLayoutOption,
/// since v1.0.0
this.containerHeight,
this.containerWidth,
this.viewportFraction: 1.0,
this.itemHeight,
this.itemWidth,
this.outer: false,
this.scale,
this.fade,
})
複製程式碼分頁指示器pagination
分頁指示器繼承子SwiperPlugin，設定SwiperPagination()展示預設分頁
const SwiperPagination(
{this.alignment, // 修改指示器的位置，預設bottomCenter（上面gif修改了這個屬性）
this.key,
this.margin: const EdgeInsets.all(10.0), // 分頁指示器與容器邊框的距離（意味著可隨意改變它的位置）
this.builder: SwiperPagination.dots}); // 預設的分頁指示器的樣式：SwiperPagination.dots(點形式)、SwiperPagination.fraction(分數形式)，也可完全自定義哦
Widget build(BuildContext context, SwiperPluginConfig config) {
Alignment alignment = this.alignment ??
(config.scrollDirection == Axis.horizontal
? Alignment.bottomCenter
: Alignment.centerRight);
Widget child = Container(
margin: margin,
child: this.builder.build(context, config),
);
複製程式碼- SwiperPagination.dots(點形式)
pagination: SwiperPagination(
builder: DotSwiperPaginationBuilder(
color: Colors.white70, // 其他點的顏色
activeColor: Colors.redAccent, // 當前點的顏色
space: 2, // 點與點之間的距離
activeSize: 20 // 當前點的大小
)
)
複製程式碼效果如圖：
- SwiperPagination.fraction(分數形式)
builder: FractionPaginationBuilder(
color: Colors.white,
activeColor: Colors.redAccent,
activeFontSize: 40
)
複製程式碼效果如圖：
- 完全自定義
pagination:new SwiperCustomPagination(
builder:(BuildContext context, SwiperPluginConfig config){
return CustomPagination();
}
)
複製程式碼分頁按鈕control
分頁按鈕也是繼承SwiperPlugin，設定SwiperControl()展示預設控制按鈕。
const SwiperControl(
{this.iconPrevious: Icons.arrow_back_ios, // 上一個的Icons
this.iconNext: Icons.arrow_forward_ios, // 下一個的Icons
this.color, // 按鈕顏色 （預設為主題色）
this.disableColor, // 禁用色（字面意思，說真的，我也不知道這貨幹嘛的?）
this.key,
this.size: 30.0, // 控制按鈕的大小，預設30.0
this.padding: const EdgeInsets.all(5.0)}); // 控制按鈕與容器的距離（位置隨意我們安排?）
複製程式碼效果如圖：
樣式二
實現程式碼：
Swiper(
itemBuilder: (BuildContext context, int index) {
return Container( // 用Container實現圖片圓角的效果
decoration: BoxDecoration(
image: DecorationImage(
image: secondImageList[index], // 圖片陣列
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
);
}
)
複製程式碼樣式三
實現程式碼：
Swiper(
itemCount: secondImageList.length,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: secondImageList[index],
fit: BoxFit.fill
),
borderRadius: BorderRadius.all(
Radius.circular(10)
)
),
);
},
layout: SwiperLayout.STACK // stack樣式
)
複製程式碼樣式四
實現程式碼：
Swiper(
layout: SwiperLayout.CUSTOM, // custom樣式
customLayoutOption: CustomLayoutOption(
startIndex: -1,
stateCount: 3
).addRotate([
-100.0/180,
0.0,
100.0/180
]).addTranslate([
Offset(-470.0, -40.0),
Offset(0.0, 0.0),
Offset(470.0, -40.0)
]),
itemWidth: 300,
itemHeight: 200,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: secondImageList[index],
fit: BoxFit.fill
),
borderRadius: BorderRadius.all(
Radius.circular(10)
)
),
);
},
pagination: SwiperPagination(
builder: DotSwiperPaginationBuilder(
color: Colors.white,
activeColor: Colors.blue
)
),
itemCount: secondImageList.length,
autoplay: true,
autoplayDisableOnInteraction: true,
)
複製程式碼面對Flutter輪播圖一頭霧水的我找到了flutte_swiper庫，然後參考flutter 輪播元件 Swiper，自己也寫了一個demo，效果不錯，這裡也分享給大家，希望能夠幫助小夥伴們。