初学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.hqwc.cn/news/159948.html

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

相关文章

代码随想录算法训练营第23期day38|动态规划理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

代码随想录算法训练营第23期day38|动态规划理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

目录 一、动态规划理论基础 1.动态规划的解题步骤 2.动态规划应该如何debug 二、&#xff08;leetcode 509&#xff09;斐波那契数 1.递归解法 2.动态规划 1&#xff09;确定dp数组以及下标的含义 2&#xff09;确定递推公式 3&#xff09;dp数组如何初始化 4&#x…
阅读更多...
20.5 OpenSSL 套接字RSA加密传输

20.5 OpenSSL 套接字RSA加密传输

RSA算法同样可以用于加密传输&#xff0c;但此类加密算法虽然非常安全&#xff0c;但通常不会用于大量的数据传输&#xff0c;这是因为RSA算法加解密过程涉及大量的数学运算&#xff0c;尤其是模幂运算&#xff08;即计算大数的幂模运算&#xff09;&#xff0c;这些运算对于计…
阅读更多...
HTTP 协议请求头 If-Match、If-None-Match 和 ETag

HTTP 协议请求头 If-Match、If-None-Match 和 ETag

概述 在 HTTP 协议中&#xff0c;请求头 If-Match、If-None-Match、If-Modified-Since、If-Unmodified-Since、If-Range 主要是为了解决浏览器缓存数据而定义的请求头标准&#xff0c;按照协议规范正确的判断和使用这几个请求头&#xff0c;可以更精准的处理浏览器缓存&#x…
阅读更多...
【OpenApi Generator】入门和调试

【OpenApi Generator】入门和调试

OpenApi Generator是什么 OpenAPI Generator 是一个完全免费开源 (Apache 许可 v2) 的项目&#xff0c;用来生成 REST1 API 客 户端、服务器存根和基于 OpenAPI (以前称为 Swagger ) 规范的文档。如果您不熟悉 OpenAPI 规范&#xff0c;那么它就是描述 RESTful API 方面最流…
阅读更多...
【漏洞复现】Apache_HTTPD_换行解析漏洞(CVE-2017-15715)

【漏洞复现】Apache_HTTPD_换行解析漏洞(CVE-2017-15715)

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞扫描3、漏洞验证 1.5、深度利用GetShell 1.6、修复建议 说明内容漏洞编号CVE-2017-15715漏洞名称Ap…
阅读更多...
linux下安装Zabbix教程

linux下安装Zabbix教程

笔记&#xff1a; 监控设备 对各种设备的统一管理 Esight 了解开源监控工具 eg Promerthos: Zabbix &#xff1a;集中式系统 大型企业 可视化,高大上、 查看日志 安装zibox软件 安装数据库 进入数据库 进入Zabbox 密码 password 账号Admin 密码zabbix 解决乱码问题 将…
阅读更多...
HiveSQL中last_value函数的应用

HiveSQL中last_value函数的应用

一、背景 在以下数据中如何实现对每一个列按照更新时间取最新的非null值&#xff1f; 1 a a null 202301 202301 1 b b null null 202302 1 null c null null 202303 1 d null null null 202304如何实现…
阅读更多...
TFN 2.5G SDH传输分析仪 FT100-D300S

TFN 2.5G SDH传输分析仪 FT100-D300S

今天给大家带来一款TFN 2.5G SDH传输分析仪--TFN FT100-D300S. D300S SDH测试模块&#xff0c;是FT100智能网络测试平台产品家族的一部分&#xff0c;是一个坚固耐用、锂电池超长供电的传统PDH/SDH测试解决方案&#xff0c;支持2.5Gbps到2.048Mbps速率的传输链路测试。支持在线…
阅读更多...
【计算机网络】应用层

【计算机网络】应用层

应用层协议原理 客户-服务器体系结构&#xff1a; 特点&#xff1a;客户之间不能直接通信&#xff1b;服务器具有周知的&#xff0c;固定的地址&#xff0c;该地址称为IP地址。 配备大量主机的数据中心常被用于创建强大的虚拟服务器&#xff1b;P2P体系结构&#xff1a; 特点&…
阅读更多...
【Kubernetes】初识k8s--扫盲阶段

【Kubernetes】初识k8s--扫盲阶段

文章目录 1、k8s概述2、为什么要有k8s2.1 回顾以往的应用部署方式2.2 容器具有的优势 3、k8s能带来什么 1、k8s概述 kubernetes是一个可移植、可扩展的开源平台&#xff0c;用于管理 容器化 的工作负载和服务&#xff0c;可促进申明式配置和自动化。kubernetes拥有一个庞大且快…
阅读更多...
英伟达发布 Windows 版 TensorRT-LLM 库

英伟达发布 Windows 版 TensorRT-LLM 库

导读英伟达发布了 Windows 版本的 TensorRT-LLM 库&#xff0c;称其将大模型在 RTX 上的运行速度提升 4 倍。 GeForce RTX 和 NVIDIA RTX GPU 配备了名为 Tensor Core 的专用 AI 处理器&#xff0c;正在为超过 1 亿台 Windows PC 和工作站带来原生生成式 AI 的强大功能。 Tens…
阅读更多...
【日常记录】关于LinkedHashMap中key为数字字符串根据compareTo排序的问题

【日常记录】关于LinkedHashMap中key为数字字符串根据compareTo排序的问题

今天在修复Bug的时候&#xff0c;在项目中发现有这样一段代码&#xff08;为了方便&#xff0c;下面用一个例子进行演示&#xff09;。 项目中使用了LinkedHashMap key为Long类型&#xff0c;value为String类型。 并且&#xff0c;LinkedHashMap 使用Stream流 对key进行升序的排…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023