Flutter 组件之Swiper轮播图 朱雀 2023-07-18 11:15 105阅读 0赞 > `flutter_swiper: ^1.1.6` //引入第三方包 import 'package:flutter_swiper/flutter_swiper.dart'; //图片列表 List<Map> imgList = [ { "url":"https://timgsa.baidu.com/4.jpg", }, { "url":"https://timgsa.baidu.com/519.jpg", }, { "url":"https://timgsa.baidu.com/timg003683.jpg", }, { "url":"https://timgsa.baidu.com/timg04d.jpg", }, ]; new Column( children: <Widget>[ Expanded( child: new Swiper( itemBuilder: (BuildContext context, int index) { return new Image.network( imgList[index]["url"], fit: BoxFit.fill,//图片填充 ); }, autoplay: true,//自动播放 itemCount: imgList.length, pagination: new SwiperPagination(builder: SwiperPagination.fraction),//分页器样式 control: new SwiperControl(),//左右箭头 )), Expanded( child: new Swiper( itemBuilder: (BuildContext context, int index) { return new Image.network( imgList[index]["url"], fit: BoxFit.fill, ); }, autoplay: true,//自动能播放 loop: true,//循环播放 itemCount: imgList.length, scrollDirection: Axis.vertical,//竖向轮播 pagination: new SwiperPagination(//分液器 alignment: Alignment.centerRight, builder: SwiperPagination.fraction), )) ], ));
还没有评论,来说两句吧...