flutter开发实战-轮播Swiper更改Custom_layout样式中Widget层级

flutter开发实战-轮播Swiper更改Custom_layout样式中Widget层级

在之前的开发过程中，需要实现卡片轮播效果，但是卡片轮播需要中间大、两边小一些的效果，这里就使用到了Swiper。具体效果如视频所示
添加链接描述
这里需要的效果是中间大、两边小一些，中间的卡片在最上层，两边的卡片会被中间的卡片挡住一部分。所以需要处理一下Custom_layout样式中Widget层级关系。
在这里插入图片描述

一、引入Swiper

在工程的pubspec.yaml中引入swiper

  # 轮播图flutter_swiper_null_safety: ^1.0.2

二、Swiper使用

Swiper无限轮播

通过Swiper()来构建轮播图控件，可以同步不同的属性搭配不同的效果

默认效果

Container(height: 200,child: new Swiper(itemBuilder: (BuildContext context,int index){return new Image.network(imgs[index],fit: BoxFit.cover,);},itemCount: imgs.length,pagination: new SwiperPagination(),//如果不填则不显示指示点control: new SwiperControl(),//如果不填则不显示左右按钮),
),

3D卡片滚动

Container(height:  200,child: new Swiper(itemBuilder: (BuildContext context, int index) {return new Image.network(imgs[index],fit: BoxFit.cover,);},itemCount: imgs.length,viewportFraction: 0.8,scale: 0.9,),
),

无限卡片堆叠

Container(height: 200,child: new Swiper(itemBuilder: (BuildContext context, int index) {return new Image.network(imgs[index],fit: BoxFit.cover,);},itemCount: imgs.length,itemWidth: 300.0,layout: SwiperLayout.STACK,),
),

无限卡片堆叠2

Container(height: 200,child: new Swiper(itemBuilder: (BuildContext context, int index) {return new Image.network(imgs[index],fit: BoxFit.cover,);},itemCount: imgs.length,itemWidth: 300.0,itemHeight: 300.0,layout: SwiperLayout.TINDER,),
),

自定义效果

Container(height: 200,child: new Swiper(layout: SwiperLayout.CUSTOM,customLayoutOption: new CustomLayoutOption(startIndex: -1,stateCount: 3).addRotate([-45.0/180,0.0,45.0/180]).addTranslate([new Offset(-370.0, -40.0),new Offset(0.0, 0.0),new Offset(370.0, -40.0)]),itemWidth: 300.0,itemHeight: 200.0,itemBuilder: (context, index) {return new Image.network(imgs[index],fit: BoxFit.cover,);},itemCount: imgs.length),
)

三、更改Custom_layout样式中Widget层级

需要的效果是中间大、两边小一些，中间的卡片在最上层，两边的卡片会被中间的卡片挡住一部分

这里使用的是SwiperLayout.CUSTOM,

这里就需要查看源码，更改Custom_layout样式中Widget层级关系，更改Stack的子Widget层级关系，需要调整中间的卡片在最上层。

找到Custom_layout.dart的源码，找到Widget _buildAnimation(BuildContext context, Widget? w)。

需要更改list，重新排列list

if (list.isNotEmpty) {int length = list.length;int mid = length~/2;List<Widget> transList = [];for (int i = mid; i >= 0; i--) {List<Widget> subList = [];for (int index = 0; index < length; index++) {int abs = (index - mid).abs();if (abs == i) {subList.add(list[index]);}}transList.addAll(subList);}print("transList:${transList}");if (transList.isNotEmpty && transList.length == list.length) {list = transList;}}

更改后的_buildAnimation代码如下

Widget _buildAnimation(BuildContext context, Widget? w) {List<Widget> list = [];if (_animationCount != null) {double? animationValue = _animation?.value;for (int i = 0; i < _animationCount!; ++i) {int realIndex = _currentIndex + i + (_startIndex ?? 0);realIndex = realIndex % widget.itemCount;if (realIndex < 0) {realIndex += widget.itemCount;}if (animationValue != null) {list.add(_buildItem(i, realIndex, animationValue));}}}if (list.isNotEmpty) {int length = list.length;int mid = length~/2;List<Widget> transList = [];for (int i = mid; i >= 0; i--) {List<Widget> subList = [];for (int index = 0; index < length; index++) {int abs = (index - mid).abs();if (abs == i) {subList.add(list[index]);}}transList.addAll(subList);}print("transList:${transList}");if (transList.isNotEmpty && transList.length == list.length) {list = transList;}}return new GestureDetector(behavior: HitTestBehavior.opaque,onPanStart: _onPanStart,onPanEnd: _onPanEnd,onPanUpdate: _onPanUpdate,child: new ClipRect(child: new Center(child: _buildContainer(list),),),);}

四、实现中间大、两边小一些，中间的卡片在最上层，两边的卡片会被中间的卡片挡住的效果

需要实现效果的时候，我们需要使用Swiper的custom，使用CustomLayoutOption添加addScale和addOpacity以及addTranslate来确定不同的卡片的缩放大小、透明度、以及offset

代码如下

Swiper(autoplay: true,layout: SwiperLayout.CUSTOM,customLayoutOption:CustomLayoutOption(startIndex: 0, stateCount: 5)..addScale([0.6,0.8,1.0,0.8,0.6,], Alignment.center)..addOpacity([1.0,1.0,1.0,1.0,1.0,])..addTranslate([Offset(-180.0, 0),Offset(-80.0, 0),Offset(0.0, 0.0),Offset(80.0, 0),Offset(180.0, 0),]),itemWidth: 230.0,itemHeight: 230.0,itemBuilder: (context, index) {return SwiperCard(imageUrl: imageUrls[index]);},itemCount: imageUrls.length,)

页面的完整代码如下

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';class SwiperPage extends StatefulWidget {const SwiperPage({super.key});@overrideState<SwiperPage> createState() => _SwiperPageState();
}class _SwiperPageState extends State<SwiperPage> {List<String> imageUrls = [];@overridevoid initState() {// TODO: implement initStateimageUrls = ["https://d-ssl.dtstatic.com/uploads/blog/202301/08/20230108192142_ff632.thumb.1000_0.jpeg_webp","https://d-ssl.dtstatic.com/uploads/blog/202301/08/20230108192143_f4355.thumb.1000_0.jpeg_webp","https://d-ssl.dtstatic.com/uploads/blog/202301/08/20230108192146_0aaf2.thumb.1000_0.jpeg_webp","https://d-ssl.dtstatic.com/uploads/blog/202301/08/20230108192148_357ff.thumb.1000_0.jpeg_webp","https://d-ssl.dtstatic.com/uploads/blog/202301/08/20230108192149_92c71.thumb.1000_0.jpeg_webp"];super.initState();}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}@overrideWidget build(BuildContext context) {Size screenSize = MediaQuery.of(context).size;return Scaffold(appBar: AppBar(title: const Text('SwiperPage'),),body: Container(width: screenSize.width,height: screenSize.height,child: Stack(alignment: Alignment.center,children: [Swiper(autoplay: true,layout: SwiperLayout.CUSTOM,customLayoutOption:CustomLayoutOption(startIndex: 0, stateCount: 5)..addScale([0.6,0.8,1.0,0.8,0.6,], Alignment.center)..addOpacity([1.0,1.0,1.0,1.0,1.0,])..addTranslate([Offset(-180.0, 0),Offset(-80.0, 0),Offset(0.0, 0.0),Offset(80.0, 0),Offset(180.0, 0),]),itemWidth: 230.0,itemHeight: 230.0,itemBuilder: (context, index) {return SwiperCard(imageUrl: imageUrls[index]);},itemCount: imageUrls.length,)],),),);}
}class SwiperCard extends StatelessWidget {const SwiperCard({super.key,required this.imageUrl,});final String imageUrl;@overrideWidget build(BuildContext context) {return Container(width: 230,height: 230,clipBehavior: Clip.hardEdge,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.all(Radius.circular(10),),border: Border.all(color: Color(0xFF5C6BC0),style: BorderStyle.solid,width: 3,),boxShadow: [BoxShadow(color: Color(0xFFE8EAF6),offset: Offset(0, -5),blurRadius: 10,)],),child: Stack(alignment: Alignment.center, children: [Positioned(top: 0,child: Image.network(imageUrl,width: 230,height: 230,),),]),);}
}

最终实现了效果。

五、小结

flutter开发实战-轮播Swiper更改Custom_layout样式中Widget层级

学习记录，每天不停进步。

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

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

相关文章

面试问题--Linux网络编程

面试问题--Linux网络编程

Linux网络编程涉及在Linux操作系统上使用套接字&#xff08;socket&#xff09;等工具进行网络通信。以下是一些与Linux网络编程相关的主题&#xff1a; 套接字编程&#xff1a; 在Linux中&#xff0c;套接字是网络编程的基础。可以使用C语言中的socket库来创建套接字。套接字…
阅读更多...
【人工智能Ⅰ】实验3：蚁群算法

【人工智能Ⅰ】实验3：蚁群算法

实验3 蚁群算法的应用 一、实验内容 TSP 问题的蚁群算法实现。 二、实验目的 1. 熟悉和掌握蚁群算法的基本概念和思想&#xff1b; 2. 理解和掌握蚁群算法的参数选取&#xff0c;解决实际应用问题。 三、实验原理 1&#xff0e;算法来源 蚁群算法的基本原理来源于自然界…
阅读更多...
C++学习 --谓词

C++学习 --谓词

目录 1&#xff0c; 什么是谓词 1-1&#xff0c; 一元谓词 1-2&#xff0c; 二元谓词 1&#xff0c; 什么是谓词 返回bool类型的仿函数&#xff0c; 叫着谓词&#xff0c; 分为一元谓词和二元谓词 1-1&#xff0c; 一元谓词 operator()接收一个参数&#xff0c;叫着一元谓…
阅读更多...
python第1天之常识及环境安装

python第1天之常识及环境安装

前言&#xff1a; 当谈到编程语言的流行度时&#xff0c;Python绝对是其中之一。Python是一种高级编程语言&#xff0c;其语法简单易懂&#xff0c;适用于各种不同的应用领域&#xff0c;包括Web开发、数据分析、人工智能等。在本文中&#xff0c;我们将探讨一些关于Pyth…
阅读更多...
【JavaScript】3.2 JavaScript性能优化

【JavaScript】3.2 JavaScript性能优化

文章目录 1. 避免全局查找2. 避免不必要的属性查找3. 使用快速的JavaScript方法4. 避免不必要的DOM操作5. 使用Web Workers进行后台处理总结 性能优化是任何编程语言的重要组成部分&#xff0c;JavaScript也不例外。在这个章节中&#xff0c;我们将探讨如何优化JavaScript代码&…
阅读更多...
GAN：WGAN

GAN：WGAN

论文&#xff1a;https://arxiv.org/pdf/1701.07875.pdf 发表&#xff1a;2017 WGAN 算法流程 从GAN 到 WGAN 的转变 相比于原始 GAN&#xff0c;WGAN 只需要修改以下几点&#xff0c;就能使得训练更稳定&#xff0c;生成质量更高&#xff1a; 1. 此时的判别器相当于做回归…
阅读更多...
【DDD】领域驱动设计总结——如何构造领域模型

【DDD】领域驱动设计总结——如何构造领域模型

文章目录 一 分离领域二 领域对象分类2.1 实体(ENTITY)2.2 值对象(VALUE OBJECT)2.3 服务(SERVICE)2.4 模块&#xff08;&#xff2d;ODULE&#xff09; 三 管理领域对象的生命周期3.1 聚合&#xff08;AGGREGATE&#xff09;3.2 工厂&#xff08;FACTORY&#xff09;3.3 存储库…
阅读更多...
记i18n ally工具检测语言失败的一则思路

记i18n ally工具检测语言失败的一则思路

情况 只有某个文件检测不到汉字&#xff0c;其余都可以检测出来&#xff0c;困扰许久&#xff0c;发个博客记一下思路 解决方法&#xff1a; 1、肯定不是i18n ally工具的问题&#xff0c;因为其他的vue都能检测成功 2、是这个文件的问题 采用排除法 先删掉所有代码&#…
阅读更多...
《Effective C++》条款27

《Effective C++》条款27

尽量少做转型动作 class A { public:A(int x) :a(x) {};virtual void add(){a;} private:int a; }; class B :public A { public:B(int x) :b(x),A(x) {};virtual void add(){static_cast<A>(*this).add();b;}private:int b; }; 如上描述把子类转型为A类&#xff0c;调用…
阅读更多...
解决keil右键Go To Definition跳转不过去的问题

解决keil右键Go To Definition跳转不过去的问题

解决&#xff1a; 在魔法棒中如图所示打上√
阅读更多...
rabbitmq技术

rabbitmq技术

1&#xff0c;docker运行rabbitmq docker run --restartalways -d --hostname my-rabbit --name rabbit -p 15672:15672 -p 5672:5672 rabbitmq 2&#xff0c;新增管理员用户 rabbitmq服务&#xff0c;添加用户以及授权_rabbitmq添加用户授权_ROBOT玲玉的博客-CSDN博客
阅读更多...
flask web开发学习之初识flask（二）

flask web开发学习之初识flask（二）

文章目录 一、创建程序实例并注册路由1. 为视图绑定绑定多个URL2. 动态URL 二、启动开发服务器1. 自动发现程序实例2. 管理环境变量3. 使用pycharm运行服务器4. 更多的启动选项5. 设置运行环境6. 调试器7. 重载器 一、创建程序实例并注册路由 app.py # 从flask包中导入flask类…
阅读更多...
NoSQL 数据建模错误会降低性能

NoSQL 数据建模错误会降低性能

数据建模错误是破坏性能的最简单方法之一。当您使用 NoSQL 时&#xff0c;特别容易搞砸&#xff0c;&#xff08;讽刺的是&#xff09;NoSQL 往往用于对性能最敏感的工作负载。NoSQL 数据建模最初可能看起来非常简单&#xff1a;只需对数据进行建模以适应应用程序的访问模式。但…
阅读更多...
Elastic Search

Elastic Search

ElasticSearch 持续更新中… 选择es的原因 在数据量非常大的时候&#xff0c;业务进行模糊查询会导致索引失效&#xff0c;查询效率低下&#xff0c;使用es进行查询&#xff0c;可以提高查询速度。 text和keyword类型的区别 keyword 类型是不会分词的&#xff0c;直接根据字…
阅读更多...
矢量图与位图区别

矢量图与位图区别

文章目录 目的区别 目的 了解矢量图与位图区别。 区别 矢量图和位图是两种不同类型的图形图像&#xff0c;它们之间的主要区别在于存储和表示图像的方式&#xff0c;以及在不同应用场景下的优势和劣势。 项目Vector GraphicsBitmap存储方式矢量图使用数学公式和几何图形的描…
阅读更多...
linux /proc 文件系统

linux /proc 文件系统

/proc系统是一个伪文件系统&#xff0c;它只存在内存当中&#xff0c;而不占用外存空间&#xff0c;以文件系统的方式为内核与进程提供通信的接口。 /proc目录下有很多以数字命名的目录&#xff0c;每个数字代表进程号PID它们是进程目录。系统中当前运行的每一个进程在/proc下都…
阅读更多...
【C++】异常处理 ② ( 异常捕获类型 | 异常捕获机制 - 严格匹配异常类型 | 未知异常捕获 - 不知道异常类型 )

【C++】异常处理 ② ( 异常捕获类型 | 异常捕获机制 - 严格匹配异常类型 | 未知异常捕获 - 不知道异常类型 )

文章目录 一、异常捕获机制 - 严格匹配异常类型1、异常捕获机制 - 严格匹配异常类型2、代码示例 - 异常捕获严格匹配异常类型 二、异常捕获机制 - 未知异常捕获1、未知异常捕获 - 不知道异常类型2、代码示例 - 未知异常捕获 一、异常捕获机制 - 严格匹配异常类型 1、异常捕获机…
阅读更多...
Echarts大屏-数据可视化

Echarts大屏-数据可视化

使用原生htmljavascript实现大屏展示,较为麻烦的为边框的四个小角使用伪元素生成,其余echarts使用如下快速上手 - Handbook - Apache ECharts 效果如下:
阅读更多...
【算法】状压DP-1

【算法】状压DP-1

状压DP 介绍介绍例子 剖析P4802 [CCO2015] 路短最题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 分析Code 介绍 介绍 状态压缩就是使用某种方法&#xff0c;简明扼要地以最小代价来表示某种状态&#xff0c;通常是用一串01数字&#xff08;二进制数&#xff0…
阅读更多...
java论坛数据以及搜索接口实现

java论坛数据以及搜索接口实现

一. 内容简介 java论坛数据以及搜索接口实现 二. 软件环境 2.1 java 1.8 2.2 mysql Ver 8.0.13 for Win64 on x86_64 (MySQL Community Server - GPL) 2.3 IDEA ULTIMATE 2019.3 2.4d代码地址 三.主要流程 3.1 创建数据库,创建数据表 3.2 开始编写接口&#xff0c;并测…
阅读更多...
最新文章

Copyright @ 2022~2023