1.导包
在pubspec.yaml中导入最新的flutter_swiper包,最新版本是1.1.6.
flutter_swiper: ^1.1.6
2.使用
预先准备几张图片路径,这是使用wan安卓中轮播图的API
List<Image> imgs = [
Image.network(
"https://wanandroid.com/blogimgs/8690f5f9-733a-476a-8ad2-2468d043c2d4.png",
fit: BoxFit.cover,
),
Image.network(
"https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png",
fit: BoxFit.cover),
Image.network(
"https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png",
fit: BoxFit.cover),
Image.network(
"https://www.wanandroid.com/blogimgs/90c6cc12-742e-4c9f-b318-b912f163b8d0.png",
fit: BoxFit.cover)
];
接下来通过flutter_swiper的几个核心属性配置轮播图
child: Swiper(
itemWidth: double.infinity,//宽度
itemHeight: 200,//高度,如果Swiper外层爆过了其他容器,并且也设置了宽高,那么itemWidth和itemHeight是没有效果的
itemCount: imgs.length,//轮播图的数量
itemBuilder: (BuildContext context, int index) {
return imgs[index];
},//使用预先定义好的Images列表构建轮播项
autoplay: true,//是否自动轮播
pagination: new SwiperPagination(builder: SwiperPagination.dots),//指示器样式,默认是小圆点,可以设置fraction、rect等形式
control: new SwiperControl(),//两侧箭头
),
看一下效果
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)