初学Flutter：swiper实现

效果展示：

flutter swiper

1、安装 card_swiper 

2、引入card_swiper

import 'package:card_swiper/card_swiper.dart';

3、使用

这里我主要是对官网例子进行实践，主要是5种常用的swiper

1、普遍的swiper

//custom swiper
class CustomSwiper extends StatefulWidget {const CustomSwiper({super.key, required this.banner});final List banner;@override_CustomSwiperState createState() => _CustomSwiperState();
}class _CustomSwiperState extends State<CustomSwiper> {@overrideWidget build(BuildContext context) {return Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),control: SwiperControl(),);}
}

2、layouts swiper

//layouts swiper
class MyLayoutSwiper extends StatefulWidget {const MyLayoutSwiper({super.key, required this.banner});final List banner;@override_MyLayoutSwiperState createState() => _MyLayoutSwiperState();
}class _MyLayoutSwiperState extends State<MyLayoutSwiper> {@overrideWidget build(BuildContext context) {return Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),viewportFraction: 0.8,scale: 0.9,);}
}

3、STACK Layout swiper

// STACK Layout swiper
class StackLayoutSwiper extends StatefulWidget {const StackLayoutSwiper({super.key, required this.banner});final List banner;@override_StackLayoutSwiperState createState() => _StackLayoutSwiperState();
}class _StackLayoutSwiperState extends State<StackLayoutSwiper> {@overrideWidget build(BuildContext context) {return Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),viewportFraction: 0.8,scale: 0.9,itemWidth: 300.0,layout: SwiperLayout.STACK,);}
}

4、TINDER Layout Swiper

// TINDER Layout Swiper
class TinderLayoutSwiper extends StatefulWidget {const TinderLayoutSwiper({super.key, required this.banner});final List banner;@override_TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
}class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {@overrideWidget build(BuildContext context) {return Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),viewportFraction: 0.8,scale: 0.9,itemWidth: 300.0,itemHeight: 400.0,layout: SwiperLayout.TINDER,);}
}

5、CUSTOM LAYOUT Swiper

// TINDER Layout Swiper
class TinderLayoutSwiper extends StatefulWidget {const TinderLayoutSwiper({super.key, required this.banner});final List banner;@override_TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
}class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {@overrideWidget build(BuildContext context) {return Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),viewportFraction: 0.8,scale: 0.9,itemWidth: 300.0,itemHeight: 400.0,layout: SwiperLayout.TINDER,);}
}// CUSTOM LAYOUT Swiper
class CustomLayoutSwiper extends StatefulWidget {const CustomLayoutSwiper({super.key, required this.banner});final List banner;@override_CustomLayoutSwiperState createState()=>_CustomLayoutSwiperState();}
class _CustomLayoutSwiperState extends State<CustomLayoutSwiper>{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),viewportFraction: 0.8,scale: 0.9,itemWidth: 300.0,itemHeight: 400.0,layout: SwiperLayout.CUSTOM,customLayoutOption: CustomLayoutOption(startIndex: -1,stateCount: 3)..addRotate([-45.0/180,0.0,45.0/180])..addTranslate([Offset(-370.0, -40.0),Offset(0.0, 0.0),Offset(370.0, -40.0)]),);}}

main.dart全部代码

import 'package:flutter/material.dart';
import 'package:card_swiper/card_swiper.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),home: const Home());}
}class Home extends StatefulWidget {const Home({super.key});@override_HomeState createState() => _HomeState();
}class _HomeState extends State<Home> {List banner = [{"banner_url":"https://ts1.cn.mm.bing.net/th/id/R-C.8e091d0e6a2b9bcb27738cd96e22f699?rik=M4LFAVmmb38W6A&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2013%2f01%2f21%2f206_170432_901de.jpg&ehk=564uTBfxvugUBybGO2%2bTpMUNgJEa6rUfSrc1sonLso8%3d&risl=&pid=ImgRaw&r=0"},{"banner_url":"https://ts1.cn.mm.bing.net/th/id/R-C.abd4829c9387ec1bfd1a276a5c1da122?rik=dl55Voqxy4wINQ&riu=http%3a%2f%2fi1.073img.com%2f140306%2f4343693_144142_1.jpg&ehk=qvhMjT0iGQT5DhH8MTkAzJqUpjHJRScTQTT5hj%2forLM%3d&risl=&pid=ImgRaw&r=0"},{"banner_url":"https://ts1.cn.mm.bing.net/th/id/R-C.ddfbf9ed55354323035f947515fe0233?rik=0KFdFk3RHUzBdg&riu=http%3a%2f%2fi1.img.969g.com%2fdown%2fimgx2013%2f01%2f05%2f206_164916_4fab0.jpg&ehk=Vqb%2f5c3%2fW5n39t7bAae6YpUlfG4ibEbf9lpETY5Xz4c%3d&risl=&pid=ImgRaw&r=0"}];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('flutter轮播图学习'), centerTitle: true),// body: Container(child: Text('pp')),body: SingleChildScrollView(child: Column(children: [const Text('Custom swiper',style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),SizedBox(height: 200,child: CustomSwiper(banner: banner,)),const Text('Build in layouts ',style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),SizedBox(height: 200,child: MyLayoutSwiper(banner: banner,)),const Text('Build in STACK layouts ',style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),SizedBox(height: 200,child: StackLayoutSwiper(banner: banner,)),const Text('Build in  TINDER layouts ',style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),SizedBox(height: 200,child: TinderLayoutSwiper(banner: banner,)),const Text('Build in  CUSTOM layouts ',style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),SizedBox(height: 200,child: CustomLayoutSwiper(banner: banner,)),]),));}
}//custom swiper
class CustomSwiper extends StatefulWidget {const CustomSwiper({super.key, required this.banner});final List banner;@override_CustomSwiperState createState() => _CustomSwiperState();
}class _CustomSwiperState extends State<CustomSwiper> {@overrideWidget build(BuildContext context) {return Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),control: SwiperControl(),);}
}//layouts swiper
class MyLayoutSwiper extends StatefulWidget {const MyLayoutSwiper({super.key, required this.banner});final List banner;@override_MyLayoutSwiperState createState() => _MyLayoutSwiperState();
}class _MyLayoutSwiperState extends State<MyLayoutSwiper> {@overrideWidget build(BuildContext context) {return Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),viewportFraction: 0.8,scale: 0.9,);}
}// STACK Layout swiper
class StackLayoutSwiper extends StatefulWidget {const StackLayoutSwiper({super.key, required this.banner});final List banner;@override_StackLayoutSwiperState createState() => _StackLayoutSwiperState();
}class _StackLayoutSwiperState extends State<StackLayoutSwiper> {@overrideWidget build(BuildContext context) {return Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),viewportFraction: 0.8,scale: 0.9,itemWidth: 300.0,layout: SwiperLayout.STACK,);}
}// TINDER Layout Swiper
class TinderLayoutSwiper extends StatefulWidget {const TinderLayoutSwiper({super.key, required this.banner});final List banner;@override_TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
}class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {@overrideWidget build(BuildContext context) {return Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),viewportFraction: 0.8,scale: 0.9,itemWidth: 300.0,itemHeight: 400.0,layout: SwiperLayout.TINDER,);}
}// CUSTOM LAYOUT Swiper
class CustomLayoutSwiper extends StatefulWidget {const CustomLayoutSwiper({super.key, required this.banner});final List banner;@override_CustomLayoutSwiperState createState()=>_CustomLayoutSwiperState();}
class _CustomLayoutSwiperState extends State<CustomLayoutSwiper>{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Swiper(itemBuilder: (BuildContext context, int index) {return Image.network(widget.banner[index]['banner_url'],fit: BoxFit.fill,);},onTap: (index) {print(index);},itemCount: widget.banner.length,// autoplay: true,pagination: const SwiperPagination(builder: DotSwiperPaginationBuilder(color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),viewportFraction: 0.8,scale: 0.9,itemWidth: 300.0,itemHeight: 400.0,layout: SwiperLayout.CUSTOM,customLayoutOption: CustomLayoutOption(startIndex: -1,stateCount: 3)..addRotate([-45.0/180,0.0,45.0/180])..addTranslate([Offset(-370.0, -40.0),Offset(0.0, 0.0),Offset(370.0, -40.0)]),);}}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

css 图片好玩的一个属性，添加滤镜

css 图片好玩的一个属性，添加滤镜

鼠标经过效果对比&#xff1a; 上图是改变了图片的饱和度&#xff0c;代码如下&#xff1a; .img-box .v-image:hover {filter: saturate(1.75); }其他滤镜说明如下图&#xff1a;
阅读更多...
R语言爬虫代码模版：技术原理与实践应用

R语言爬虫代码模版：技术原理与实践应用

目录 一、爬虫技术原理 二、R语言爬虫代码模板 三、实践应用与拓展 四、注意事项 总结 随着互联网的发展&#xff0c;网络爬虫已经成为获取网络数据的重要手段。R语言作为一门强大的数据分析工具&#xff0c;结合爬虫技术&#xff0c;可以让我们轻松地获取并分析网络数据。…
阅读更多...
office2024下载详细安装教程

office2024下载详细安装教程

简单的说 Office 是一款由Microsoft 开发的一套办公软件&#xff0c;里面包含了常用的办公组件而其中就包含了Word、Excel、PowerPoint、Access等&#xff01; 并且office是目前最常用的一类办公软件&#xff0c;使用它可以解决日常生活和工作中遇到的很多问题。 熟练掌握offi…
阅读更多...
Java医院HIS系统源码

Java医院HIS系统源码

Java医院HIS系统源码 项目描述 该项目是用springbootlayuishiro写的医院管理系统&#xff0c;该系统的业务比较复杂&#xff0c;数据库一共有36张表。项目的视频业务参考文档&#xff0c;都在百度云盘中。可以先看看视频和参考文档。 运行环境 jdk8mysqlIntelliJ IDEAmaven…
阅读更多...
shell script 的默认变量$0,$1,$2...，参数偏移的shift

shell script 的默认变量$0,$1,$2...，参数偏移的shift

简单来说&#xff0c;在scirpt脚本里面&#xff0c;$0表示文件名&#xff0c;$1表示第一个参数&#xff0c;以此类推&#xff0c;还有 $# 后面接参数的个数 $ 代表"$1","$2","$3"&#xff0c;每个都是独立的&#xff0c;用双引号括起来 $* 代…
阅读更多...
register_parameter和register_buffer 详解

register_parameter和register_buffer 详解

在参考yolo系列代码或其他开源代码&#xff0c;经常看到register_buffer和 register_parameter的使用&#xff0c;接下来将详细对他们进行介绍。 1. 前沿 在搭建网络时&#xff0c;我们 自定义的参数&#xff0c;往往不会保存到模型权重文件中&#xff0c;或者成为模型可学习…
阅读更多...
软件测试之BUG篇（定义，创建，等级，生命周期）

软件测试之BUG篇（定义，创建，等级，生命周期）

目录 1. BUG 的定义 2. 如何创建 BUG 3. BUG 等级 4. BUG 生命周期 高频面试题&#xff1a; 1. BUG 的定义 当且仅当产品规格书存在且正确时&#xff0c;程序的实现和规格书的要求不匹配时&#xff0c;那就是软件错误。当产品规格说明书没有提到的功能时&#xff0c;以用户…
阅读更多...
国家统计局教育部各级各类学历教育学生情况数据爬取

国家统计局教育部各级各类学历教育学生情况数据爬取

教育部数据爬取 1、数据来源2、爬取目标3、网页分析4、爬取与解析5、如何使用Excel打开CSV1、数据来源 国家统计局：http://www.stats.gov.cn/sj/ 教育部：http://www.moe.gov.cn/jyb_sjzl/ 数据来源：国家统计局教育部文献教育统计数据2021年全国基本情况（各级各类学历教育学…
阅读更多...
编写shell脚本，利用mysqldump实现MySQL数据库分库分表备份

编写shell脚本，利用mysqldump实现MySQL数据库分库分表备份

查看数据和数据表 mysql -uroot -p123456 -e show databases mysql -uroot -p123456 -e show tables from cb_d 删除头部Database和数据库自带的表 mysql -uroot -p123456 -e show databases -N | egrep -v "information_schema|mysql|performance_schema|sys"编写…
阅读更多...
HTML和CSS的基础-前端扫盲

HTML和CSS的基础-前端扫盲

想要写出一个网页&#xff0c;就需要学习前端开发&#xff08;写网页代码&#xff09;和后端开发&#xff08;服务器代码&#xff09;。 对于前端的要求&#xff0c;我们不需要了解很深&#xff0c;仅仅需要做到扫盲的程度就可以了。 写前端&#xff0c;主要用到的有&#xf…
阅读更多...
蓝鹏测控测宽仪系列又添一员大将——双目测宽仪

蓝鹏测控测宽仪系列又添一员大将——双目测宽仪

轧钢过程中钢板的宽度是一个重要的参数&#xff0c;它直接决定了成材率。同时&#xff0c;随着高新科技越来越广泛的应用到工程实际中&#xff0c;许多控制系统需要钢板实时宽度值作为模型参数。 当前&#xff0c;相当一部分宽厚板厂还在采用人工检测的方法&#xff0c;检测环境…
阅读更多...
【漏洞复现】Drupal XSS漏洞复现

【漏洞复现】Drupal XSS漏洞复现

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 复现环境&#xff1a;Vulhub 环境启动后&#xff0c;访问 http://192.168.80.141:8080/ 将会看到drupal的安装页面&#xff0c;一路默认配置下一步安装。因为没有mysql环境&#xff0c;…
阅读更多...
Mac下使用nvm，执行微信小程序自定义处理命令失败

Mac下使用nvm，执行微信小程序自定义处理命令失败

环境 系统&#xff1a;Mac OS 终端&#xff1a;zsh CPU&#xff1a;M1/ARM架构 node环境&#xff1a;nvm&#xff0c;node20 node目录&#xff1a;/Users/laoxu/.nvm/versions/node/v20.1.0/bin/ 问题 在使用微信小程序的自定义处理命令时&#xff0c;启动失败 提示找不…
阅读更多...
【音视频 | Ogg】libogg库详细介绍以及使用——附带libogg库解析.opus文件的C源码

【音视频 | Ogg】libogg库详细介绍以及使用——附带libogg库解析.opus文件的C源码

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…
阅读更多...
算法随想录算法训练营第四十九天| 503.下一个更大元素II 42. 接雨水

算法随想录算法训练营第四十九天| 503.下一个更大元素II 42. 接雨水

503.下一个更大元素II 题目&#xff1a;给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。数字 x 的 下一个更大的元素 是按数组遍历顺序&#xff0c;这个数字之后的第一个…
阅读更多...
算法题：16. 最接近的三数之和（Python Java 详解）

算法题：16. 最接近的三数之和（Python Java 详解）

解题思路 Step1&#xff1a;先对数组排序&#xff0c;然后设置3个指针&#xff0c;指针1遍历范围为&#xff08;0~数组长度减2&#xff09;。 Step2&#xff1a;指针1位置确定时&#xff0c;指针1后面的数组元素首位各放置一个指针&#xff08;指针2、指针3&#xff09;。 S…
阅读更多...
Python笔记——linux/ubuntu下安装mamba，安装bob.learn库

Python笔记——linux/ubuntu下安装mamba，安装bob.learn库

Python笔记——linux/ubuntu下安装mamba&#xff0c;安装bob.learn库 一、安装/卸载anaconda二、安装mamba1. 命令行安装&#xff08;大坑&#xff0c;不推荐&#xff09;2. 命令行下载guihub上的安装包并安装&#xff08;推荐&#xff09;3. 网站下载安装包并安装&#xff08;…
阅读更多...
电路正负反馈，电压电流反馈，串并联反馈详细判别方法

电路正负反馈，电压电流反馈，串并联反馈详细判别方法

正/负反馈&#xff1a;假设输出升高&#xff0c;转一圈回来仍使其升高就是正反馈&#xff0c;反之就是负反馈。作图法&#xff1a;在RL的信号端画一个向上的小箭头&#xff0c;沿着反馈环路&#xff0c;每经过一个元器件就画一个相应的箭头&#xff0c;一直画到放大器的输出端&…
阅读更多...
代理模式（静态代理、JDK代理、CGLIB代理）

代理模式（静态代理、JDK代理、CGLIB代理）

简介 代理模式有三种不同的形式&#xff1a;静态代理、动态代理&#xff08;JDK代理、接口代理&#xff09;、CGLIB代理 目标&#xff1a;在不修改目标对象的前提下&#xff0c;对目标对象进行扩展。 静态代理 需要定义接口或父类对象&#xff0c;被代理对象和代理对象通过实…
阅读更多...
asp.net docker-compose添加dapr配置

asp.net docker-compose添加dapr配置

docker-compose.yml添加配置 webapplication1-dapr:image: "daprio/daprd:1.9.6"network_mode: "service:webapplication1"depends_on:- webapplication1 docker-compose.override.yml中添加 dapr-placement:command: ["./placement", "-po…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023