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(),//两侧箭头
),
看一下效果
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦