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.rhkb.cn/news/212034.html

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

相关文章

图像瞎总结

图像瞎总结

阅读更多...
安装postgresql驱动及python使用pyodbc指定postgresql驱动调用postgresql

安装postgresql驱动及python使用pyodbc指定postgresql驱动调用postgresql

注&#xff1a;Python解释器版本(32位/64位)和postgresql驱动版本(32位/64位)需一致。 一、安装postgresql驱动 https://www.postgresql.org/ftp/odbc/versions/msi/ &#xff08;1&#xff09;32位&#xff1a; &#xff08;2&#xff09;64位&#xff1a; 双击安装。全程默…
阅读更多...
高精度加法，减法，乘法，除法（上）（C语言）

高精度加法，减法，乘法，除法（上）（C语言）

前言 加&#xff0c;减&#xff0c;乘&#xff0c;除这些运算我们自然信手捏来&#xff0c;就拿加法来说&#xff0c;我们要用c语言编程算ab的和&#xff0c;只需让sum ab即可&#xff0c;可是这是局限的&#xff0c;我们都知道int的表示的最大值为2147483647&#xff08;32位…
阅读更多...
2023.12.3 分布式SQL查询引擎-Presto

2023.12.3 分布式SQL查询引擎-Presto

目录 目录 1.Prosto简介 Apache Hadoop-MapReduce Apache Hive 2.Presto的优缺点 3.个人自用启动服务 个人自用启动服务 3.Presto的架构 4.presto和hive的区别 5.presto优化 6.Presto-内存调优 1.Prosto简介 Apache Hadoop-MapReduce 优点&#xff1a;统一、通用、简…
阅读更多...
C - 语言-＞内存函数

C - 语言-＞内存函数

目录 系列文章目录 前言 1. memcpy使⽤和模拟实现 1.2 memcpy函数的模拟实现: 2. memmove 使⽤和模拟实现 2.1memmove的模拟实现&#xff1a; 3. memset 函数的使⽤ 4. memcmp 函数的使⽤ 系列文章目录 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff…
阅读更多...
论文精读 MOG 埃里克·格里姆森

论文精读 MOG 埃里克·格里姆森

Adaptive background mixture models for real-time tracking 用于实时跟踪的自适应背景混合模型 1999年的MOG&#xff0c;作者是麻省理工学院前校长——埃里克格里姆森&#xff08;W. Eric L. Grimson&#xff09;。 目录 摘要 结论 1 介绍 1.1 以往的工作和现在的缺点 …
阅读更多...
学生成绩管理系统（Java）

学生成绩管理系统（Java）

开发环境: Windows 11 IDEA 2021.3.3 需求: package com.it.neu;import java.util.ArrayList; import java.util.Scanner;import static java.time.Clock.system;class Student { //创建学生类private String Stu_name;private String Stu_id;public Student(String id, S…
阅读更多...
履带吊，笔记

履带吊，笔记

0.前言 履带吊使用了与传统的门桥式起重机不同的技术路线。因为它是移动式设备&#xff0c;所以它的动力是燃油发动机。为了精确调控升降。它的整套动力系统似乎采用了某种液压传动系统。履带吊国内也有生产商。但是下文中&#xff0c;还是从国外的一款产品说起。这款产品的pd…
阅读更多...
Android蓝牙协议栈fluoride(二) - 软件框架

Android蓝牙协议栈fluoride(二) - 软件框架

概述 fluoride 协议栈在整个软件框架中作为一个中间件的角色&#xff0c;向上对接APP&#xff0c;向下对接蓝牙芯片。fluoride采用C语言实现&#xff0c;与APP(Jave)通信采用JNI机制&#xff1b;与蓝牙芯片通信使用HCI硬件接口&#xff08;HCI软件协议参考蓝牙核心规范&#x…
阅读更多...
Linux环境搭建（Ubuntu22.04）+ 配置共享文件夹（Samba）

Linux环境搭建（Ubuntu22.04）+ 配置共享文件夹（Samba）

Linux开发环境准备 搭建Linux开发环境所需要的软件如下&#xff1a; VMware虚拟机&#xff1a;用于运行Linux操作系统的虚拟机软件之一&#xff0c;VMware下载安装在文章中不做说明&#xff0c;可自行百度谢谢Ubuntu光盘镜像&#xff1a;用于源代码编译&#xff0c;有闲置计算…
阅读更多...
Docker部署开源分布式任务调度系统DolphinScheduler与远程访问办公

Docker部署开源分布式任务调度系统DolphinScheduler与远程访问办公

文章目录 前言1. 安装部署DolphinScheduler1.1 启动服务 2. 登录DolphinScheduler界面3. 安装内网穿透工具4. 配置Dolphin Scheduler公网地址5. 固定DolphinScheduler公网地址 前言 本篇教程和大家分享一下DolphinScheduler的安装部署及如何实现公网远程访问&#xff0c;结合内…
阅读更多...
Qt OpenCV 学习（一）：环境搭建

Qt OpenCV 学习（一）：环境搭建

对应版本 Qt 5.15.2OpenCV 3.4.9MinGW 8.1.0 32-bit 1. OpenCV 下载 确保安装 Qt 时勾选了 MinGW 编译器 本文使用 MinGW 编译好的 OpenCV 库&#xff0c;无需自行编译 确保下载的 MinGW 和上述安装 Qt 时勾选的 MinGW 编译器位数一致&#xff0c;此处均为 x86/32-bit下载地址…
阅读更多...
Python语言基础知识（一）

Python语言基础知识（一）

文章目录 1、Python内置对象介绍2、标识符与变量3、数据类型—数字4、数据类型—字符串与字节串5、数据类型—列表、元组、字典、集合6、运算符和表达式7、运算符和表达式—算术运算符8、运算符和表达式—关系运算符9.1、运算符和表达式— 成员测试运算符in9.2、运算符和表达式…
阅读更多...
C++中单引号‘‘和双引号““的区别

C++中单引号‘‘和双引号““的区别

操作系统&#xff1a;Windows 10 IDE&#xff1a;CLion 单引号&#xff1a;表示一个字符&#xff0c;例如 a 双引号""&#xff1a;表示一个字符串&#xff0c;例如 "a" 在C中&#xff0c;使用双引号可以方便地创建字符串&#xff0c;而使用单引号可以方便…
阅读更多...
使用PCSS实现的实时阴影效果

使用PCSS实现的实时阴影效果

PCSS的技术可以使得阴影呈现出近硬远软的效果&#xff0c;并且能够实时实现。 其核心理念是通过模拟光源的面积来产生更自然、更柔和的阴影边缘。 具体步骤&#xff1a; 1、生成shadowmap 2、在进行阴影的比较时候进行平均&#xff0c;并非之前的shadow map 或者之后完全的阴影…
阅读更多...
python pytorch实现RNN,LSTM，GRU，文本情感分类

python pytorch实现RNN,LSTM，GRU，文本情感分类

python pytorch实现RNN,LSTM&#xff0c;GRU&#xff0c;文本情感分类 数据集格式&#xff1a; 有需要的可以联系我 实现步骤就是&#xff1a; 1.先对句子进行分词并构建词表 2.生成word2id 3.构建模型 4.训练模型 5.测试模型 代码如下&#xff1a; import pandas as pd im…
阅读更多...
各大期刊网址

各大期刊网址

1.NeurIPS&#xff0c;全称Annual Conference on Neural Information Processing Systems&#xff0c; 是机器学习领域的顶级会议&#xff0c;与ICML&#xff0c;ICLR并称为机器学习领域难度最大&#xff0c;水平最高&#xff0c;影响力最强的会议&#xff01; NeurIPS是CCF 推…
阅读更多...
List系列集合

List系列集合

List系列集合特点&#xff1a;有序&#xff0c;可重复&#xff0c;有索引 ArrayList&#xff1a;有序&#xff0c;可重复&#xff0c;有索引 LinkedList&#xff1a;有序&#xff0c;可重复&#xff0c;有索引 &#xff08;底层实现不同&#xff01;适合的场景不同&#xff01;…
阅读更多...
keepalive路由缓存实现前进刷新后退缓存

keepalive路由缓存实现前进刷新后退缓存

1.在app.vue中配置全局的keepalive并用includes指定要缓存的组件路由name名字数组 <keep-alive :include"keepCachedViews"><router-view /></keep-alive>computed: {keepCachedViews() {console.log(this.$store.getters.keepCachedViews, this.…
阅读更多...
常见动物经济手术3d模拟交互演示教学实现了教育资源的共享

常见动物经济手术3d模拟交互演示教学实现了教育资源的共享

动物常见病防治是兽医必备的技能&#xff0c;为了让实习兽医在上岗作业前拥有丰富的常见病防治经验。借助动物常见病防治VR虚拟仿真技术开展动物常见病防治VR模拟实操培训&#xff0c;能极大方便院校实训。 提高教学质量 传统的动物医学教学往往依赖于理论知识和实验室实践&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023