機緣巧合裙顽，我了解到 packages 下的輪播組件 swiper耗绿，記錄一下姑蓝。
?packages 鏈接：flutter_swiper
?Github 鏈接：best-flutter/flutter_swiper
Get
?在項目目錄中的pubspec.yaml文件中的dependencies里導(dǎo)入flutter_swiper: ^1.1.6。運行flutter packages get储狭。
dependencies:
# 最新的版本，版本會迭代捣郊，需保持最新的
flutter_swiper: ^1.1.6
屬性解讀（常用）
Swiper(
scrollDirection: Axis.horizontal,// 方向 Axis.horizontal Axis.vertical
itemCount: 4, // 展示數(shù)量
autoplay: true,// 自動翻頁
itemBuilder:(){...},// 布局構(gòu)建
onTap:(){...}, // 點擊時間
pagination: SwiperPagination(), // 分頁指示
viewportFraction: 0.8, // 視窗比例
layout: SwiperLayout.STACK, // 布局方式
itemWidth: MediaQuery.of(context).size.width, // 條目寬度
itemHeight: MediaQuery.of(context).size.height, // 條目高度
autoplayDisableOnInteraction: true, // 用戶進(jìn)行操作時停止自動翻頁
loop: true, // 無線輪播
indicatorLayout: PageIndicatorLayout.SLIDE, // 指標(biāo)布局 試了半天也沒試出來這是啥
)
使用示例
?在這展示幾個小栗子辽狈，可直接拿去復(fù)制。
?示例一 四張圖片 自動翻頁 左右控制按鈕 頁面指示器（點）
?去掉
control:屬性呛牲，圖上的左右控制翻頁按鈕就會消失了刮萌。
Container(
height: ScreenUtil().setHeight(300), // 高度 插件 flutter_screenutil
child: Swiper(
scrollDirection: Axis.horizontal,// 橫向
itemCount: 4,// 數(shù)量
autoplay: true, // 自動翻頁
itemBuilder: (BuildContext context, int index) {
return Image.network("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=500542857,4026327610&fm=26&gp=0.jpg",
fit: BoxFit.fill);
}, // 構(gòu)建
onTap: (index) {print('點擊了第${index}');},// 點擊事件 onTap
pagination: SwiperPagination(// 分頁指示器
alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中間
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),// 距離調(diào)整
builder: DotSwiperPaginationBuilder( // 指示器構(gòu)建
space: ScreenUtil().setWidth(5),// 點之間的間隔
size: ScreenUtil().setWidth(10), // 沒選中時的大小
activeSize: ScreenUtil().setWidth(12),// 選中時的大小
color: Colors.black54,// 沒選中時的顏色
activeColor: Colors.white)),// 選中時的顏色
control: new SwiperControl(color: Colors.pink), // 頁面控制器 左右翻頁按鈕
scale: 0.95,// 兩張圖片之間的間隔
),
),
?示例二 四張圖片 自動翻頁 頁面指示器（數(shù)字）
Container(
height: ScreenUtil().setHeight(300), // 高度
child: Swiper(
scrollDirection: Axis.horizontal,// 橫向
itemCount: imageList.length,// 數(shù)量
autoplay: true,// 自動翻頁
itemBuilder: (BuildContext context, int index) {return imageList[index];},// 構(gòu)建
onTap: (index) {print('點擊了第${index}');},// 點擊事件 onTap
// 分頁指示器
pagination: SwiperPagination(
alignment: Alignment.bottomRight,// 位置 Alignment.bottomCenter 底部中間
margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),// 距離調(diào)整
builder: FractionPaginationBuilder( // 指示器構(gòu)建
color: Colors.white,// 字體顏色
activeColor: Colors.yellow, // 當(dāng)前的指示字體顏色
fontSize: ScreenUtil().setSp(30),// 字體大小
activeFontSize: ScreenUtil().setSp(35),// 當(dāng)前的指示字體大小
)
),
scale: 0.95,// 兩張圖片之間的間隔
),
)
?示例三
Container(
color: Colors.black,
padding: const EdgeInsets.only(top: 10),
height: ScreenUtil().setHeight(380), // 高度
child: Swiper(
scrollDirection: Axis.horizontal, // 橫向
itemCount: 4,// 數(shù)量
autoplay: true,// 自動翻頁
itemBuilder: (BuildContext context, int index) {// 構(gòu)建
return Container(
margin: const EdgeInsets.only(bottom: 30),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3932546523,304539533&fm=26&gp=0.jpg'),
fit: BoxFit.fill),
borderRadius: BorderRadius.all(Radius.circular(10))),
);
},
onTap: (index) {print('點擊了第${index}');},// 點擊事件 onTap
pagination: SwiperPagination( // 分頁指示器
alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中間
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距離調(diào)整
builder: DotSwiperPaginationBuilder(
activeColor: Colors.yellow,
color: Colors.white,
size: ScreenUtil().setWidth(15),
activeSize: ScreenUtil().setWidth(25),
space: ScreenUtil().setWidth(10),
)),
viewportFraction: 0.8,// 當(dāng)前視窗展示比例 小于1可見上一個和下一個視窗
scale: 0.8, // 兩張圖片之間的間隔
),
)
?示例四
?代碼中的
_imageHttpsList是一個存儲了四個圖片鏈接的List：
Container(
color: Colors.black,
padding: const EdgeInsets.only(top: 10),
height: ScreenUtil().setHeight(380), // 高度
child: Swiper(
scrollDirection: Axis.horizontal, // 橫向
itemCount: _imageHttpsList.length,// 數(shù)量
autoplay: false,// 自動翻頁
itemBuilder: (BuildContext context, int index) {// 構(gòu)建
return Container(
margin: const EdgeInsets.only(bottom: 30),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(_imageHttpsList[index]),fit: BoxFit.fill),
borderRadius: BorderRadius.all(Radius.circular(10))),
);
},
onTap: (index) {print('點擊了第${index}');},// 點擊事件 onTap
pagination: SwiperPagination( // 分頁指示器
alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中間
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距離調(diào)整
builder: FractionPaginationBuilder(
activeColor: Colors.yellow,
color: Colors.white,
fontSize: ScreenUtil().setSp(15),
activeFontSize: ScreenUtil().setSp(25),
)),
viewportFraction: 0.8,// 當(dāng)前視窗展示比例 小于1可見上一個和下一個視窗
scale: 0.8, // 兩張圖片之間的間隔
layout: SwiperLayout.TINDER,
itemWidth: MediaQuery.of(context).size.width,
itemHeight: MediaQuery.of(context).size.height,
),
)
?示例五
?這里面有個很神奇的地方
itemWidth: MediaQuery.of(context).size.width - 100，以后某些特殊的寬度可以這樣設(shè)置娘扩。
Container(
color: Colors.black,
padding: const EdgeInsets.only(top: 10),
height: ScreenUtil().setHeight(380), // 高度
child: Swiper(
scrollDirection: Axis.horizontal, // 橫向
itemCount: _imageHttpsList.length,// 數(shù)量
autoplay: false,// 自動翻頁
itemBuilder: (BuildContext context, int index) {// 構(gòu)建
return Container(
margin: const EdgeInsets.only(bottom: 30),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
_imageHttpsList[index]),
fit: BoxFit.fill),
borderRadius: BorderRadius.all(Radius.circular(10))),
);
},
onTap: (index) {print('點擊了第${index}');},// 點擊事件 onTap
pagination: SwiperPagination( // 分頁指示器
alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中間
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距離調(diào)整
builder: FractionPaginationBuilder(
activeColor: Colors.yellow,
color: Colors.white,
fontSize: ScreenUtil().setSp(15),
activeFontSize: ScreenUtil().setSp(25),
)),
viewportFraction: 0.8,// 當(dāng)前視窗展示比例 小于1可見上一個和下一個視窗
scale: 0.8, // 兩張圖片之間的間隔
layout: SwiperLayout.STACK,
itemWidth: MediaQuery.of(context).size.width - 100,
itemHeight: MediaQuery.of(context).size.height,
),
)
?示例六
?這個只是把示例五的
scrollDirection改成Axis.vertical着茸。
Container(
...
child: Swiper(
scrollDirection: Axis.vertical, // 豎向
...
),
)
