Flutter 组件之Swiper轮播图-蒲公英云

Flutter 组件之Swiper轮播图

朱雀 2023-07-18 11:15 217阅读 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),
        ))
  ],
));