Flutter 组件之Swiper轮播图

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

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter绘制轮播图控件KqSwiper

演示 ![0affe1380b5547baba6274dcbf61871e.png][] 功能 1.可自定义设置宽高 2.可点击回调 3.可设置是否自动轮

ゝ一世哀愁。/ 2024年03月25日 16:55/ 0 赞/ 84 阅读

相关 28 Flutter 轮播图 flutter_swiper

中文地址： [https://github.com/best-flutter/flutter\_swiper/blob/master/README-ZH.md][https_

- 日理万妓/ 2023年08月17日 15:59/ 0 赞/ 131 阅读

相关 Flutter 组件之Swiper轮播图

> `flutter_swiper: ^1.1.6` //引入第三方包 import 'package:flutter_swiper/flutter_swip

朱雀/ 2023年07月18日 11:15/ 0 赞/ 150 阅读

相关 swiper轮播图

> swiper中只能放swiper-item > `block` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 <swiper

妖狐艹你老母/ 2022年09月05日 02:00/ 0 赞/ 239 阅读

相关 Vue使用轮播图vue-awesome-swiper组件常用属性-swiper案例

[vue-awesome-swiper][] ![20210816180708815.gif][] 安装 npm install vue-awesome-

我会带着你远行/ 2022年09月05日 01:57/ 0 赞/ 349 阅读

相关 Swiper插件超简单实现轮播图

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用话不多说，直接上教程

Love The Way You Lie/ 2022年02月14日 06:07/ 0 赞/ 385 阅读

相关 vue 轮播图插件vue-awesome-swiper

在做vue项目时，咱们会经常遇到轮播图效果，那么这给大家介绍一个好用的轮播图插件vue-awesome-swiper，首先在github中搜索vue-awesome-swipe

女爷i/ 2021年09月18日 14:58/ 0 赞/ 1084 阅读

相关 uniapp组件-uni-swiper-dot轮播图指示点

官方：[https://ext.dcloud.net.cn/plugin?id=284][https_ext.dcloud.net.cn_plugin_id_284] ![

悠悠/ 2021年07月25日 12:40/ 0 赞/ 1993 阅读

相关 flutter 轮播图库fluuter_swiper

1、在dart库中搜索fluuter_swiper并按教程配置 2、使用轮播图的必须包裹有高度的父组件,或者父组件无高宽使用子元素宽高比组件Aspe

悠悠/ 2021年07月25日 02:05/ 0 赞/ 456 阅读

相关用Swiper实现轮播图

用Swiper实现轮播图任务描述相关知识搭建Swiper环境代码文件任务描述本关任务：用Swiper实现一

系统管理员/ 2021年06月24日 13:58/ 0 赞/ 559 阅读