Flutter 组件之Swiper轮播图

最新推荐文章于 2024-08-08 07:09:05 发布

June.1

最新推荐文章于 2024-08-08 07:09:05 发布

阅读量1.4w

点赞数 1

分类专栏： android

本文链接：https://blog.csdn.net/qq_39043923/article/details/105128855

版权

android 专栏收录该内容

18 篇文章 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),
        ))
  ],
));