Flutter笔记:光影动画按钮、滚动图标卡片组等
作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/134339302
1. 关于
之前发布过一个 scale_design 模块,主要提供的是一个基于 dp 尺寸的设计稿解决方案,记录在我的博客【scale_design - 设计师尺寸适配工具与常用组件库】,地址:https://jclee95.blog.csdn.net/article/details/134210226。我打算将一些常用的组件,对于少数常用的原生组件,如 Text、TextSpan、以及各种原生的Button,已经提供了对应的方案。
在 scale_design 的 example 示例 项目中,展示了基于该模块初始化到使用这些组件完成的一些简单面和部分组件的展示,比如一个极简的登陆页面:

等等。
后续不断将我项目中所封装过的一些常用效果和组件添加进来。本文带来的是基于 dp 的三个组件:
- 循环滚动文字组件;
- 光影按钮组件;
- 图标按钮组组件
下面一一记录。
注意:不可单独使用这些组件,它们需要在项目开始时按照 scale_design 提供的方式进行初始化。具体可以参考 scale_design文档或内部的 example
2. 循环滚动文字组件 SlideText
循环滚动文字常用于封装一些需要展示多个文本的场景,算得上是基本组件中的基本组件。比如某宝首页的伪搜索框:

这其中的文本就是不断地滚动地。具体来说,有多个不同的小文本,前一个文本向上移除的同时、后一个文本向上移入中间位置。这可以使用 scale_design 库中新增的 SlideText 组件实现,比如:
SlideText(['你有未读消息,请尽快处理1','你有未读消息,请尽快处理2','你有未读消息,请尽快处理3','你有未读消息,请尽快处理4',],
)
看起来效果是这样的:

其中,SlideText默认情况下是向上动画的,但是实际上是可以通过指定 isScrollUp 参数进行控制
3. 光影按钮组件 ShinyButton
这个组件完全是受启发于我之前写前端代码时使用过光影按钮的效果,但是前端是使用CSS实现的。于是我使用 Flutter 的动画复刻了一个类似的效果。
一个例子为:
class ShinyButtonExample extends StatelessWidget {const ShinyButtonExample({super.key});Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: T('光影按钮',fontSize: 18,),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[// 当仅传递 onPressed 的时候ShinyButton(onPressed: () {}),const SizedBox(height: 30),// 如果没有任何参数则成为禁用状态ShinyButton(),const SizedBox(height: 30),// 你也可以自定义圆角、颜色、子元素等参数ShinyButton(borderRadius: 20,colors: const [Color.fromARGB(255, 112, 255, 117),Color.fromARGB(255, 0, 81, 3),Color.fromARGB(255, 112, 255, 117),],child: T('自定义一些属性',color: Colors.amber,fontSize: 20,fontWeight: FontWeight.bold,),onPressed: () {print('Button Pressed');},),const SizedBox(height: 30),// 使用 disabled 属性禁用按钮ShinyButton(borderRadius: 20,width: 300,colors: const [Color.fromARGB(255, 112, 255, 117),Color.fromARGB(255, 0, 81, 3),Color.fromARGB(255, 112, 255, 117),],disabled: true,onPressed: () {},child: T('使用 disabled 属性禁用按钮',color: Colors.white,fontSize: 20,fontWeight: FontWeight.bold,),),const SizedBox(height: 30),// 一个登陆按钮的示例ShinyButton(borderRadius: 60,width: 310,colors: const [Color.fromARGB(255, 255, 224, 112),Color.fromARGB(255, 220, 77, 0),Color.fromARGB(255, 255, 224, 112),],onPressed: () {},child: T('登 陆',color: Colors.white,fontSize: 23,fontWeight: FontWeight.bold,),),],),),);}
}
其效果如下:

4. 图标按钮组组件 ScrollableIconsCard
实际上,ScrollableIconsCard组件 受启发于某宝首页的 图标按钮组组件,例如:
// 定义一组图标与触碰图标时的回调,假设下main这些图标在你的项目中存在
List<Map<String, Object>> datas = [{'img': 'assets/svgs/捡漏.svg', 'title': '捡漏', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/摇现金.svg', 'title': '摇现金', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/聚补贴.svg', 'title': '聚补贴', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/领券中心.svg', 'title': '领券中心', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/肥鱼.svg', 'title': '肥鱼', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/金币.svg', 'title': '金币', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/工厂购.svg', 'title': '工厂购', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/小时达.svg', 'title': '小时达', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/全球购.svg', 'title': '全球购', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/全部频道.svg', 'title': '全部频道', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/活动日历.svg', 'title': '活动日历', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/减肥助手.svg', 'title': '减肥助手', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/购1001铺.svg','title': '购1001铺','onTap': () => print('捡漏')},{'img': 'assets/svgs/小美庭院.svg', 'title': '小美庭院', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/动物餐厅.svg', 'title': '动物餐厅', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/购票票.svg', 'title': '购票票', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/地狗好屋.svg', 'title': '地狗好屋', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/飞鸟旅行.svg', 'title': '飞鸟旅行', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/资质规则.svg', 'title': '资质规则', 'onTap': () => print('捡漏')},{'img': 'assets/svgs/分类.svg', 'title': '分类', 'onTap': () => print('捡漏')},
];ScrollableIconsCard(datas: datas,
),

你可以指定行数,这需要通过传入 amount 参数
ScrollableIconsCard(amount: 3,datas: datas,
),
其中构造函数:
const ScrollableIconsCard({super.key,required this.datas,this.amount = 2, // 每一列的单元数量,默认为3this.spoutWidth = 80, // 滑槽宽度this.sliderWidth = 40, // 滑块宽度,默认为40this.sliderHeight = 7, // 滑槽和滑块的高度,默认为7this.spoutColor = const Color.fromARGB(255, 183, 183, 183), // 滑槽的颜色this.sliderColor = const Color.fromARGB(255, 255, 134, 13), // 滑块的颜色});
相关文章:
Flutter笔记:光影动画按钮、滚动图标卡片组等
Flutter笔记 scale_design更新:光影动画按钮、滚动图标卡片组 作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 :291148484163.com 本文地址:https://blog.csdn.net/qq_28550263…...
【论文】利用移动性的比例公平蜂窝调度测量和算法
(一支笔一包烟,一节论文看一天 )(一张纸一瓶酒,一道公式推一宿) 摘要1. 引言2. 相关工作3. 模型和问题公式4. 预测FPF调度 ( P F ) 2 S (PF)^2S (…...
内存条选购注意事项(电脑,笔记本)
电脑内存条的作用、选购技巧以及注意事项详解 - 郝光明的个人空间 - OSCHINA - 中文开源技术交流社区 现在的电脑直接和内存条联系 电脑上的所有输入和输出都只能依靠内存条 现在买双条而不是单条 买两个相同的内存条最好 笔记本先分清是低电压还是标准电压,DD…...
ChatGPT 宕机?OpenAI 将中断归咎于 DDoS 攻击
您的 ChatGPT 已关闭吗?您是否遇到 ChatGPT 问题,例如连接问题或遇到“长响应时出现网络错误”?– ChatGPT 遭受了一系列 DDoS 攻击,显然是由匿名苏丹组织策划的。 OpenAI 的 ChatGPT 是一款流行的人工智能聊天机器人,…...
go单元格测试
编写单元测试(Unit Test)是一种测试方法,用于验证代码中的单个功能单元(通常是函数或方法)是否按照预期工作。以下是编写单元测试的一般步骤: 1. 创建测试文件:在项目的测试目录中创建一个新的…...
JavaScript理解表达式和语句的含义
JavaScript中的表达式和语句都是用于完成特定计算或操作的语言构件,但它们有着不同的含义和用途: 表达式(expression)是用来计算并返回一个值的代码片段,可以包含变量、数值、函数调用、运算符等。表达式的运算结果可以被赋值给变量、作为函数…...
Visual Studio导入Wiinform项目文件,引用显示黄色感叹号
参考博客 第一步: 开程序包管理控制台 vs->工具->NuGet包管理器->程序包管理控制台 Update-Package –reinstall 第二步: 删除.csproj 文件片段 // 整个模块全部删除 包括标签中所含有的任何内容 <Target Name"EnsureNuGetPackage…...
深入研究SVN代码检查的关键工具:svnchecker vs. SonarQube,选择最适合你的代码检查工具
目录 一、SVN代码检查(整合svnchecker)1、创建SVN代码库2、下载安装包3、修改SVN配置4、新建代码检查配置文件(名称自定义)5、hooks目录添加配置文件6、设置只对Java文件进行检查7、测试 二、SonarQube代码检测1、什么是SonarQube2、MySQL数据库的安装3、SonarQube服务端软件安…...
博客积分上一万一千了
博客积分上一万一千了 充满自信,继续前进。...
docker 构建并运行 python项目
此处不重述docker安装及基本命令,可参考另一篇文章centos7 安装 docker_centos7 docker network rm-CSDN博客文章浏览阅读111次。1、 1.1 docker 官网 Empowering App Development for Developers | DockerLearn how Docker helps developers bring their ideas to …...
django建站过程(4)创建文档显示页面
django建站过程(4)创建文档显示页面 创建文档显示页面项目主文件夹schoolapps中的文件urls.py在APP“baseapps”中创建url.py文件编写视图模板继承bootstrap创建head.html创建doclist.html创建docdetail.html 使用 markdown 编辑器安装模块Model 模型的d…...
uniapp本地存储的几种方式
在UniApp中,你可以使用本地存储来保存和获取数据,以便在应用的不同页面之间共享数据或在应用关闭后仍然保存数据。UniApp提供了两种主要的本地存储方式:uni.setStorage 和 uni.getStorage,以及 uni.removeStorage 用于删除数据。这…...
74hc595模块参考
74hc595模块参考 8位串行并行输出(SIPO)移位寄存器 使用74HC595移位寄存器扩展微控制器上的输出引脚数量。如果你需要扩充输入引脚的数量那么你需要74HC165移位寄存器。 SER(串行输入)引脚用于一次一位地将数据发送到移位寄存器…...
【Unity细节】Failed importing package???Unity导包失败?
👨💻个人主页:元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 😶🌫️收录于专栏:unity细节和bug 😶🌫️优质专栏 ⭐【…...
【问题记录】docker pull 镜像的时候 devel 版本和无 devel 版本的差别
这两个Docker镜像的主要区别在于是否包含了 CUDA 的开发工具集(CUDA Toolkit)。 docker pull cnstark/pytorch:1.10.0-py3.8.16-cuda11.1.1-ubuntu20.04这个镜像只包含运行时所需的库文件,并没有额外安装CUDA Toolkit。 docker pull cnstar…...
前后端跨域/ 同时运行两个项目
(1)后端配置端口 server:port: 90 (2)前端 配置跨域资源共享(CORS) devServer: {disableHostCheck: true,port: 8088,proxy: {/openapi: {target: http://192.168.31.109:90,ws: false,changeOrigin: true…...
进制的转换
1、进制的转化 (1)进制介绍 对于进制,有四种表示方法: 1)二进制:0,1,满2进1,C语言中没有二进制常数的表示方法 2)八进制:0-7,满8进1 3࿰…...
计算机简介
一、是什么 计算机(computer)俗称电脑,是现代一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能。是能够按照程序运行,自动、高速处理海量数据的现代化…...
《红蓝攻防对抗实战》十一.内网穿透之利用SSH协议进行隧道穿透
利用DNS协议进行隧道穿透 一.前言二.前文推荐三. 利用SSH协议进行隧道穿透1.SSH隧道-本地端口转发2.SSH隧道-远程端口转发3.SSH隧道-动态端口转发 四.本篇总结 一.前言 SSH(Secure Shell)协议是一种加密的网络传输协议,它可以在不安全的网络…...
工商银行卡安全码怎么看
工商银行的安全码,作为一项至关重要的安全措施,旨在保护用户的银行账户和交易安全。为了查看工商银行的安全码用户需要按照以下步骤操作: 首先,用户需要使用电脑或手机访问工商银行的网上银行平台。在平台首页,用户需要…...
别再手动改时间了!Ubuntu 22.04 用 timedatectl 一键切换时区到 Asia/Shanghai 的完整指南
告别时间混乱:Ubuntu 22.04 时区管理终极指南 刚装好Ubuntu系统,发现右下角的时间总是不对?每次连接远程服务器都要手动计算时差?作为Linux新手,你可能还在图形界面里翻找时区设置,或者用着老旧的tzselect…...
基于Leaflet和GFS气象数据构建动态气象可视化系统的实战指南
1. 从零开始认识气象可视化系统 第一次接触气象可视化是在三年前的一个天气预警项目,当时看到Windy.com那种丝滑的动态风场效果就被深深吸引。作为前端开发者,我一直在想如何用开源技术栈实现类似效果。经过多次尝试,终于摸索出一套基于Leafl…...
开源可部署!实时口罩检测-通用镜像实战:3步完成本地高效推理
开源可部署!实时口罩检测-通用镜像实战:3步完成本地高效推理 1. 快速了解实时口罩检测模型 今天给大家介绍一个非常实用的AI工具——实时口罩检测-通用模型。这个模型能够自动识别图片中的人脸,并准确判断是否佩戴了口罩,对于公…...
如何通过手机号快速找回QQ号:开源工具的3分钟解决方案
如何通过手机号快速找回QQ号:开源工具的3分钟解决方案 【免费下载链接】phone2qq 项目地址: https://gitcode.com/gh_mirrors/ph/phone2qq 在数字生活中,你是否曾因忘记QQ账号而焦急万分?手机更换、系统重装或长期未登录,…...
嵌入式AI边缘部署雏形:STM32与PyTorch服务器协同的物体识别系统设计
嵌入式AI边缘部署雏形:STM32与PyTorch服务器协同的物体识别系统设计 1. 引言:当单片机遇上AI服务器 想象一下这样的场景:一个巴掌大的STM32开发板通过摄像头捕捉图像,瞬间将画面传送到云端服务器进行AI分析,再根据识…...
cv_resnet101_face-detection_cvpr22papermogface 算法解析:深入理解卷积神经网络(CNN)在其中的作用
cv_resnet101_face-detection_cvpr22papermogface 算法解析:深入理解卷积神经网络(CNN)在其中的作用 最近在整理一些经典的人脸检测模型时,又仔细看了看这个来自CVPR 2022的MogFace。它基于ResNet101这个大家伙,效果确…...
Intv_ai_mk11 C语言接口调用教程:为嵌入式设备注入AI对话能力
Intv_ai_mk11 C语言接口调用教程:为嵌入式设备注入AI对话能力 1. 引言:为什么嵌入式设备需要AI对话能力 想象一下,你的智能家居设备不仅能执行命令,还能像朋友一样自然交流;工业设备在出现异常时,能用人类…...
如何高效聚合多维度统计报表:单查询替代30次SELECT的实战方案
本文介绍通过一次数据库查询配合php逻辑处理,替代数十次独立sql查询来生成多部门、多时间维度统计报表的方法,兼顾性能与可维护性。 本文介绍通过一次数据库查询配合php逻辑处理,替代数十次独立sql查询来生成多部门、多时间维度统计报表…...
自动化测试中的“等待”策略:聪明地等待,而不是傻等
一、为什么等待策略是自动化测试的命脉 在自动化测试中,等待策略直接决定脚本的稳定性和执行效率。当测试代码以毫秒级速度运行时,浏览器渲染、网络请求和异步加载往往需要秒级响应。若缺乏合理的等待机制,将引发三大致命问题: 元…...
Qwen2.5-Coder-1.5B功能体验:代码生成、推理、修复一站式解决
Qwen2.5-Coder-1.5B功能体验:代码生成、推理、修复一站式解决 1. 模型概览 Qwen2.5-Coder-1.5B是阿里云通义大模型团队推出的专业代码生成模型,属于Qwen2.5-Coder系列中的轻量级版本。该模型专为代码相关任务优化,在保持较小参数规模的同时…...
