Flutter 组件之Swiper轮播图

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),
        ))
  ],
));
发布了164 篇原创文章 · 获赞 537 · 访问量 13万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览