Flutter实现轮播图功能

news2024/9/23 23:25:26

一、在pubspec.yaml中添加:

dependencies:
  # 轮播图
  card_swiper: ^3.0.1

card_swiper: ^3.0.1,要获取最新版本:https://pub-web.flutter-io.cn/packages/card_swiper/versions,这个里面有文档可以看,如下图:
在这里插入图片描述

打开Versions看看文档,如下图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、在项目下的assets\images上添加图标,然后在pubspec.yaml上配置:
在这里插入图片描述

三、完整代码实现:

import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            SizedBox(
              height: 200,
              child: CustomSwiper(),
            ),
          ],
        ),
      ),
    );
  }
}

//custom swiper
class CustomSwiper extends StatefulWidget {
  
  _CustomSwiperState createState() => _CustomSwiperState();
}

class _CustomSwiperState extends State<CustomSwiper> {
  List banner = [
    {"imagePath": 'assets/images/banner1.png'},
    {"imagePath": 'assets/images/banner2.png'},
    {"imagePath": 'assets/images/banner3.png'},
  ];

  
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.asset(
          banner[index]['imagePath'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: banner.length,
      autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      // control: const SwiperControl(),//< >
    );
  }
}

运行程序效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1430668.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

创建一个Vue项目(含npm install卡住不动的解决)

目录 1 安装Node.js 2 使用命令提示符窗口创建Vue 2.1 打开命令提示符窗口 2.2 初始Vue项目 2.2.1 npm init vuelatest 2.2.2 npm install 3 运行Vue项目 3.1 命令提示符窗口 3.2 VSCode运行项目 1 安装Node.js 可以看我的这篇文章《Node.js的安装》 2 使用命令提示…

Pytorch学习02_TensorBoard使用01

更换编辑器 找到自己的Anaconda安装路径下envs\pytorch01中的oython.exe&#xff0c;pytorch01是笔者自己创建的pytorch环境名 选择好后&#xff0c;点击确定 点击 “应用”&#xff0c;再点击“确定” 在pytorch环境下安装tensorboard pip install pytorch 安装结束 writer.ad…

css1文本属性

一.颜色&#xff08;color&#xff09;&#xff08;一般用16进制&#xff09; 二.对齐&#xff08;text-align) 三.装饰&#xff08;text-decoration&#xff09; 四.缩进&#xff08;text-indent&#xff09;&#xff08;一般用2em&#xff09;&#xff08;有单位&#xff09;…

Android开发--实时监测系统+部署故障诊断算法

0.项目整体思路介绍&#xff1a; 搭建无人装备模拟实验平台&#xff0c;使用采集器对数据进行采集&#xff0c;通过网络通信Udp协议发送到安卓端&#xff0c;安卓端作界面显示&#xff0c;算法使用matlab仿真后&#xff0c;用C语言实现。将采集器采集到的数据经过处理后训练&a…

docker入门教程之将应用程序容器化

将应用程序容器化 在本指南的其余部分中&#xff0c;您将使用在 Node.js 上运行的简单待办事项列表管理器。如果您不熟悉 Node.js&#xff0c;请不要担心。本指南不需要任何 JavaScript 经验。 先决条件 您已安装最新版本的 Docker Desktop。您已经安装了 Git 客户端。您可以…

树莓派与Win11通信【一对一】(四)

树莓派与Win11通信【一对一】&#xff08;四&#xff09; 树莓派与Win11通信【一对一】&#xff08;四&#xff09;的代码优化版&#xff0c; 最近给代码添加了打开摄像头与否的验证&#xff0c;以及文件的保存&#xff0c;定时拍摄 1.Server端 import socket import time …

解决浏览器端 globalThis is not defined 报错

解决浏览器端 globalThis is not defined 报错 前言解决办法&#xff1a; 前言 在使用低版本火狐浏览器出现报错globalThis is not defined 解决办法&#xff1a; 在vue的index.html 中添加 this.globalThis || (this.globalThis this) <head><script>this.g…

vue3-自定义指令

自定义指令 vue 除了内置的制指令&#xff08;v-model v-show 等&#xff09;之外&#xff0c;还允许我们注册自定义的指令。 vue 复用代码的方式&#xff1a; 组件&#xff1a;主要是构建模块。 组合式函数&#xff1a;侧重有状态的逻辑。 自定义指令&#xff1a;主要是为…

day10笔记

API 显示->索引->搜索框输入->回车查看信息 字符串 直接赋值进串池(会先找,有复用) new出来的在堆里面 字符串比较 ""引用数据类型比较的是地址值 一模一样的比较 忽略大小写的比较 Scanner输入的数据是new出来的 遍历字符串 public class StringDe…

【ELK】logstash快速入门

1.概述 1.1.什么是logstash&#xff1f; 之前我们聊了es&#xff0c;并且用docker搭建了一个eskibana的环境。es目前最普遍的用法是用来存储日志的&#xff0c;然后结合kibana对日志做一些可视化的工作。既然要收集日志&#xff0c;就面临着一个问题&#xff1a; 各个系统的…

微信小程序(三十三)promise异步写法

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.promise异步与普通异步的写法区别 2.promise异步的优势 源码&#xff1a; index.wxml <view class"preview" bind:tap"onChoose"><image src"{{avatar}}" mode"…

Python—数据可视化Seaborn大全:参数详解与实战案例全解析【第52篇—python:Seaborn大全】

文章目录 Seaborn库常用绘图详解与实战引言安装与导入一、散点图参数说明实战案例 二、直方图参数说明实战案例 三、线性关系图参数说明实战案例 四、热力图参数说明实战案例 五、分布图参数说明实战案例 六、箱线图参数说明实战案例 七、联合分布图参数说明实战案例 八、小提琴…

计算机设计大赛 深度学习 机器视觉 人脸识别系统 - opencv python

文章目录 0 前言1 机器学习-人脸识别过程人脸检测人脸对其人脸特征向量化人脸识别 2 深度学习-人脸识别过程人脸检测人脸识别Metric Larning 3 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习 机器视觉 人脸识别系统 该项目…

Elasticsearch(ES) 创建带有分词器规则的索引

上文 Elasticsearch(ES) 下载添加IK分词器 带大家 下载 并使用了 IK 分词器 我们先启动 ES 服务 然后 我们来说 IK分词器 怎么用 设置分词器 我们还是要发put请求 创建索引时 通过参数设置 这里 我们put请求 类型要换成 json的 我们先加一个这样的模板 {"mappings&quo…

如何把vue项目打包成桌面程序 electron-builder

引入 我们想要把我们写的vue项目,打包成桌面程序&#xff0c;我们需要使用electron-builder这个库 如何使用 首先添加打包工具 vue add electron-builder 选择最新版本 下载完毕 我们可以看到我们的package.json中多了几行 electron:build&#xff1a;打包我们的可执行程序 e…

【开源】基于JAVA+Vue+SpringBoot的教学资源共享平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课程资源模块2.4 课程作业模块2.5 课程评价模块 三、系统设计3.1 用例设计3.2 类图设计3.3 数据库设计3.3.1 课程档案表3.3.2 课程资源表3.3.3 课程作业表3.3.4 课程评价表 四、系统展…

#从零开始# 在深度学习环境中,如何用 pycharm配置使用 pipenv 虚拟环境

为Python项目创建虚拟环境 在深度学习环境和一般python环境中安装pipenv基本一致&#xff0c;只需要确认好pipenv指定的python版本即可,安装pipenv前&#xff0c;可以通过python --version来确认安装版本 快捷键&#xff1a;crtl alt S 查看interpreter&#xff0c;查看所有…

C++棋类小游戏2

今天给大家带来我花了1周时间自创的小游戏的升级版&#xff0c;博主还是一名小学生&#xff0c;希望大家提提意见。这是我写的最长的C代码&#xff0c;希望大家喜欢&#xff0c;不要抄袭&#xff0c;任何编译器都可以。 以前版本——C自创棋类小游戏-CSDN博客 C内容提示&…

揭秘备忘录模式:打造灵活高效的状态管理解决方案

备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为设计模式&#xff0c;它允许在不暴露对象内部状态的情况下捕获和恢复对象的内部状态。这种模式主要用于实现撤销操作。 在 Java 中&#xff0c;备忘录模式通常包括以下三个角色&#xff1a; 发起人&#xff08;O…

jmeter-03界面介绍

文章目录 主界面介绍工具栏介绍测试计划介绍线程组介绍线程组——选择测试计划&#xff0c;右键-->添加-->线程-->线程组1.线程数2.准备时长(Ramp-up)3.循环次数4.same user on each iteratio5.调度器 主界面介绍 工具栏介绍 新建测试计划&#xff1a;创建一个空白的测…