018.jpg
樣式一
先看效果圖：
image
這是最終的實(shí)現(xiàn)效果，下面仔細(xì)看一下實(shí)現(xiàn)方式
實(shí)現(xiàn)方式
引入flutter_swiper庫(kù)
flutter_swiper利用的是這個(gè)庫(kù)，可以實(shí)現(xiàn)多樣式的布局。先說(shuō)說(shuō)庫(kù)的導(dǎo)入。
之前的文章有提到過(guò)本地圖片的加載方式，是進(jìn)入到pubspec.yaml文件里添加，同時(shí)，引入三方庫(kù)也是一樣。
image
找到這個(gè)地方，增加一行代碼
flutter_swiper: ^1.0.6
然后到項(xiàng)目的目錄下運(yùn)行下面命令行 (這個(gè)過(guò)程可能會(huì)等一會(huì)，反正我是等了一會(huì))
flutter packages get
等到提示完成的時(shí)候，那么這個(gè)庫(kù)就導(dǎo)入完成了，下面看具體的實(shí)現(xiàn)。
具體代碼實(shí)現(xiàn)
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> {
// 聲明一個(gè)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是因?yàn)楸镜貙?xiě)了幾組不同樣式的展示，太懶了，所以這里就沒(méi)有改
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('點(diǎn)擊了第$index'),
),
);
}
Widget _swiperBuilder(BuildContext context, int index) {
return (imageList[index]);
}
}
下面介紹一下幾個(gè)常用的Swiper屬性：
Swiper({
this.itemBuilder,
this.indicatorLayout: PageIndicatorLayout.NONE,
///
this.transformer,
@required this.itemCount, // 個(gè)數(shù)
this.autoplay: false, // 是否自動(dòng)播放，默認(rèn)false
this.layout: SwiperLayout.DEFAULT, // 設(shè)置樣式，后面會(huì)介紹，default就是上面輪播的樣式
this.autoplayDelay: kDefaultAutoplayDelayMs,
this.autoplayDisableOnInteraction: true, // 用戶拖拽的時(shí)候，是否停止自動(dòng)播放
this.duration: kDefaultAutoplayTransactionDuration, // 動(dòng)畫(huà)時(shí)間，默認(rèn)300.0毫秒
this.onIndexChanged, // 當(dāng)用戶手動(dòng)拖拽或自動(dòng)播放引起下標(biāo)改變的時(shí)候調(diào)用
this.index, // 初始播放輪播時(shí)的下標(biāo)位置
this.onTap, // 點(diǎn)擊輪播的事件
this.control, // 分頁(yè)按鈕（一般是左右或上下兩邊的箭頭按鈕）
this.loop: true, // 無(wú)限輪播模式開(kāi)關(guān)
this.curve: Curves.ease, // 動(dòng)畫(huà)的方式
this.scrollDirection: Axis.horizontal, // 滾動(dòng)方式
this.pagination, // 分頁(yè)指示器（下面跟著滾動(dòng)的點(diǎn)）
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,
})
分頁(yè)指示器pagination
分頁(yè)指示器繼承子SwiperPlugin，設(shè)置SwiperPagination()展示默認(rèn)分頁(yè)
const SwiperPagination(
{this.alignment, // 修改指示器的位置，默認(rèn)bottomCenter（上面gif修改了這個(gè)屬性）
this.key,
this.margin: const EdgeInsets.all(10.0), // 分頁(yè)指示器與容器邊框的距離（意味著可隨意改變它的位置）
this.builder: SwiperPagination.dots}); // 默認(rèn)的分頁(yè)指示器的樣式：SwiperPagination.dots(點(diǎn)形式)、SwiperPagination.fraction(分?jǐn)?shù)形式)，也可完全自定義哦
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(點(diǎn)形式)
pagination: SwiperPagination(
builder: DotSwiperPaginationBuilder(
color: Colors.white70, // 其他點(diǎn)的顏色
activeColor: Colors.redAccent, // 當(dāng)前點(diǎn)的顏色
space: 2, // 點(diǎn)與點(diǎn)之間的距離
activeSize: 20 // 當(dāng)前點(diǎn)的大小
)
)
效果如圖：
image
- SwiperPagination.fraction(分?jǐn)?shù)形式)
builder: FractionPaginationBuilder(
color: Colors.white,
activeColor: Colors.redAccent,
activeFontSize: 40
)
效果如圖：
image
- 完全自定義
pagination:new SwiperCustomPagination(
builder:(BuildContext context, SwiperPluginConfig config){
return CustomPagination();
}
)
分頁(yè)按鈕control
分頁(yè)按鈕也是繼承SwiperPlugin，設(shè)置SwiperControl()展示默認(rèn)控制按鈕。
const SwiperControl(
{this.iconPrevious: Icons.arrow_back_ios, // 上一個(gè)的Icons
this.iconNext: Icons.arrow_forward_ios, // 下一個(gè)的Icons
this.color, // 按鈕顏色 （默認(rèn)為主題色）
this.disableColor, // 禁用色（字面意思，說(shuō)真的，我也不知道這貨干嘛的??）
this.key,
this.size: 30.0, // 控制按鈕的大小，默認(rèn)30.0
this.padding: const EdgeInsets.all(5.0)}); // 控制按鈕與容器的距離（位置隨意我們安排??）
效果如圖：
image
以上基本的控件和屬性說(shuō)完了，下面重點(diǎn)來(lái)了啊，如何利用上面說(shuō)的這些知識(shí)實(shí)現(xiàn)不同樣式的輪播圖。
樣式二
image
實(shí)現(xiàn)代碼：
Swiper(
itemBuilder: (BuildContext context, int index) {
return Container( // 用Container實(shí)現(xiàn)圖片圓角的效果
decoration: BoxDecoration(
image: DecorationImage(
image: secondImageList[index], // 圖片數(shù)組
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
);
}
)
樣式三
image
實(shí)現(xiàn)代碼：
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樣式
)
樣式四
image
實(shí)現(xiàn)代碼：
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,
)
面對(duì)Flutter輪播圖一頭霧水的我找到了flutte_swiper庫(kù)，然后參考flutter 輪播組件 Swiper，自己也寫(xiě)了一個(gè)demo，效果不錯(cuò)，這里也分享給大家，希望能夠幫助小伙伴們。
