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)协议是一种加密的网络传输协议,它可以在不安全的网络…...
工商银行卡安全码怎么看
工商银行的安全码,作为一项至关重要的安全措施,旨在保护用户的银行账户和交易安全。为了查看工商银行的安全码用户需要按照以下步骤操作: 首先,用户需要使用电脑或手机访问工商银行的网上银行平台。在平台首页,用户需要…...
[AI/向量数据库/GUI] Attu : Milvus 的图形化与一体化管理工具涎
前言 在使用 kubectl get $KIND -o yaml 查看 k8s 资源时,输出结果中包含大量由集群自动生成的元数据(如 managedFields、resourceVersion、uid 等)。这些信息在实际复用 yaml 清单时需要手动清理,增加了额外的工作量。 使用 kube…...
如何用3分钟将B站视频转成文字稿?这个免费开源工具让你告别手动记录
如何用3分钟将B站视频转成文字稿?这个免费开源工具让你告别手动记录 【免费下载链接】bili2text Bilibili视频转文字,一步到位,输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 你是否曾经面对长达几小时的B…...
3大核心功能:告别网盘下载限速的终极解决方案
3大核心功能:告别网盘下载限速的终极解决方案 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ,支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘 / 迅…...
BMD58T280 TFT-LCD驱动库技术解析与嵌入式显示优化
1. BMD58T280 TFT-LCD显示库深度技术解析BMD58T280是Best Modules Corp推出的2.8英寸TFT-LCD显示扩展板专用Arduino驱动库,面向嵌入式开发者提供SPI与EBI双接口支持。该库并非通用型LCD驱动框架,而是针对BMD58T280硬件模块的定制化固件封装,其…...
ESP8266嵌入式MQTT Broker:本地AP+WebSocket轻量实现
1. 项目概述MQTTbroker 是一款专为 ESP8266 设计的轻量级嵌入式 MQTT 消息代理(Broker)实现,其核心目标是消除云中转依赖,构建本地闭环物联网控制链路。该库并非通用型 MQTT 服务器(如 Mosquitto 或 EMQX)&…...
常州别墅大宅设计装修行业头部企业精选评估报告
当前,常州别墅大宅设计装修技术已成为高端家装领域增长的核心驱动力,随着高净值人群需求升级,市场呈现出“设计个性化、施工精细化、服务全案化、品质高端化”的趋势,但同时也存在设计同质化严重、施工管控难度大、全案交付能力不…...
如何关闭RAC特性_单节点启动cluster_database=false维护
不能,cluster_databasefalse仅使实例以单实例模式启动,但底层仍依赖Oracle Clusterware组件,未真正关闭RAC。cluster_databasefalse 能否让 RAC 实例降级为单实例运行不能直接“关闭 rac 特性”,cluster_databasefalse 只是禁止实…...
和为K的子数组出现了多少个
思路:前缀和+哈希表(记录前缀和出现次数)和为k,将k视为一个区间。子数组,要想到区间和,然后想到前缀和。prefix_sum(prefix_sum-k)kdef subArraySum(k,nums):cnt0prefix_sum0mp{0:1} #初始化前…...
AI驱动的软件文档闭环:从代码提交到API文档/PRD/测试用例自动生成(实测准确率92.6%,已交付37个生产系统)
第一章:AI原生软件研发文档自动化生成方案 2026奇点智能技术大会(https://ml-summit.org) AI原生软件研发正面临文档滞后、语义割裂与维护成本激增的三重挑战。传统文档生成依赖人工补全或静态模板,难以响应代码逻辑的实时演进;而AI驱动的文…...
python类库(一)模板
一、PromptTemplate方法from_templatePromptTemplate 的 from_template 方法就是将一个原始的模板字符串转化为一个更丰富、更方便操作的 PromptTemplate 对象,这个对象就是 LangChain 中的提示模板。示例# 导入LangChain中的提示模板 from langchain_core.prompts …...
