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),
        ))
  ],
));
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐