Flutter笔记:光影动画按钮、滚动图标卡片组等

Flutter笔记
scale_design更新:光影动画按钮、滚动图标卡片组

作者李俊才 (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 的三个组件:

  1. 循环滚动文字组件;
  2. 光影按钮组件;
  3. 图标按钮组组件

下面一一记录。

注意:不可单独使用这些组件,它们需要在项目开始时按照 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), // 滑块的颜色});

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

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

相关文章

SpringData、SparkStreaming和Flink集成Elasticsearch

本文代码链接&#xff1a;https://download.csdn.net/download/shangjg03/88522188 1 Spring Data框架集成 1.1 Spring Data框架介绍 Spring Data是一个用于简化数据库、非关系型数据库、索引库访问&#xff0c;并支持云服务的开源框架。其主要目标是使得对数据的访问变得方便快…

成集云 | 英克对接零售O2O+线上商城 | 解决方案

方案介绍 零售O2O线上商城是一种新型的商业模式&#xff0c;它通过线上和线下的融合&#xff0c;提供更加便捷的购物体验。其中&#xff0c;O2O指的是线上与线下的结合&#xff0c;通过互联网平台与实体店面的结合&#xff0c;实现线上线下的互动和协同。线上商城则是指通过互…

Git的进阶操作,在idea中部署gie

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; ​​ &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《git》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;这…

[工业自动化-9]:西门子S7-15xxx编程 - PLC主站 - 信号量:模拟量

目录 前言&#xff1a; 一、模拟量模块 1.1 概述 1.2 安装 1.3 模拟量链接线 二、模拟量常见问题 2.1 两线制、四线制&#xff08;电流&#xff09; 2.2 模拟量模块的参数 2.3 差分信号与单端信号 三、如何防止电磁干扰 3.1 概述 3.2 工业现场的电磁干扰源来源 3.…

Hive3 on Spark3配置

1、软件环境 1.1 大数据组件环境 大数据组件版本Hive3.1.2Sparkspark-3.0.0-bin-hadoop3.2 1.2 操作系统环境 OS版本MacOSMonterey 12.1Linux - CentOS7.6 2、大数据组件搭建 2.1 Hive环境搭建 1&#xff09;Hive on Spark说明 Hive引擎包括&#xff1a;默认 mr、spark、…

IP行业API助力于网络分析和数据挖掘

引言 在当今数字化时代&#xff0c;数据成为了企业、科研机构和政府决策者的重要资源&#xff0c;而IP行业API则成为了数据分析及挖掘的工具之一。IP行业API是一种能够查询IP地址所属的行业分类信息的应用程序接口&#xff0c;它能够提供在网络分析、用户行为分析及大数据挖掘…

ChatRule:基于知识图推理的大语言模型逻辑规则挖掘11.10

ChatRule&#xff1a;基于知识图推理的大语言模型逻辑规则挖掘 摘要引言相关工作初始化和问题定义方法实验 摘要 逻辑规则对于揭示关系之间的逻辑联系至关重要&#xff0c;这可以提高推理性能并在知识图谱&#xff08;KG&#xff09;上提供可解释的结果。虽然已经有许多努力&a…

Python如何正确将“爬虫数据”以json格式进行保存

前言 本文是该专栏的第59篇,后面会持续分享python爬虫干货知识,记得关注。 处理爬虫项目的时候,相信很多同学都会遇到这样的需求。需要你将爬虫抓取到的数据以json格式进行存储,尤其需要将数据存入mongo数据库的时候。以csv,txt,mysql等形式进行存储,本专栏前面都有详细…

【LeetCode刷题笔记】堆和优先级队列

358. K 距离间隔重排字符串 解题思路: 大根堆 + 队列 , 1)首先 计数数组 统计 每个字符出现的次数 ,然后将 计数 > 0 的 字符 和 次数 一起放入 大根堆 ,大根堆中

高阶组件和Hooks

目录 1. 高阶组件&#xff08;Higher-Order Components&#xff09; 1.1 创建高阶组件 1.2 使用高阶组件 2. Hooks 2.1 使用useState Hook管理状态 2.2 创建自定义Hook 结论 1. 高阶组件&#xff08;Higher-Order Components&#xff09; 高阶组件是一个接受一个组件作为…

【Bug】Python利用matplotlib绘图无法显示中文解决办法

一&#xff0c;问题描述 当利用matplotlib进行图形绘制时&#xff0c;图表标题&#xff0c;坐标轴&#xff0c;标签中文无法显示&#xff0c;显示为方框&#xff0c;并报错 运行窗口报错&#xff1a; 这是中文字体格式未导入的缘故。 二&#xff0c;解决方案 在代码import部…

在 Arduino IDE 2.0 中安装 ESP32 板(Windows、Mac OS X、Linux)

有一个新的 Arduino IDE——Arduino IDE 2.0&#xff08;测试版&#xff09;。在本教程中&#xff0c;您将学习如何在 Arduino IDE 2.0 中安装 ESP32 板并将代码上传到板。本教程与 Windows、Mac OS X 和 Linux 操作系统兼容。 据 Arduino 网站称&#xff1a;“ Arduino IDE 2.…

MacOS 下使用 cloud 版 qcow2镜像的最佳实践

写在前面 事情的起因是我想在 MacOS(arm)上使用 qemu虚拟化一个 Fedora 镜像, 我下载了 cloud 的 qcow2 版本, 但是用户名和密码一直找不到, 后来看论坛说用户名是 fedora 而密码是没有, 是通过 cloud-init 构建的镜像… 又是未知领域, 开始 hack! 环境: Mac m1 with brew qe…

vscode调试react 最初的源码

如果直接在react项目中打点调试, 调试的是 react-dom.development.js, 而源码里这些逻辑是分散在不同的包里的,如何才能够调试 React 最初的源码呢&#xff1f; JS 代码经过编译&#xff0c;会产生目标代码&#xff0c;但同时也会产生 sourcemap。sourcemap 的作用就是映射目…

DAY50 309.最佳买卖股票时机含冷冻期 + 714.买卖股票的最佳时机含手续费

309.最佳买卖股票时机含冷冻期 题目要求&#xff1a;给定一个整数数组&#xff0c;其中第 i 个元素代表了第 i 天的股票价格 。 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&#xff09;: 你不…

SpringBoot中required a bean of type ‘java.lang.String‘ that could not be found问题

项目场景&#xff1a; Parameter 3 of constructor in cn.xxx required a bean of type java.lang.String that could not be found 问题描述&#xff1a; Error starting ApplicationContext. To display the conditions report re-run your application with debug enable…

HCIP---VRRP

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一. VRRP概述 VRRP---虚拟路由器冗余协议 VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;是一种用于在多个路由器之间创建虚拟路由器的协议。 VRRP使用了一系列协议来实现路…

虚拟机的简单介绍

虚拟机&#xff08;Virtual Machine&#xff09;指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统。 在实体计算机中能够完成的工作在虚拟机中都能够实现。在计算机中创建虚拟机时&#xff0c;需要将实体机的部分硬盘和内存容量作为虚拟机的…

OpenCV入门9:图像增强和图像滤波

图像增强是一种通过对图像进行处理以改善其质量、对比度、清晰度等方面的技术。在OpenCV中&#xff0c;有多种图像增强的方法和函数可用。下面简要介绍一些常见的图像增强方法及其在OpenCV中的实现方式。 直方图均衡化&#xff08;Histogram Equalization&#xff09;&#xff…

新零售时代,传统便利店如何转型?

在零售批发业&#xff0c;如何降低各环节成本、提高业务运转效率、更科学地了解客户服务客户&#xff0c;是每家企业在激烈竞争中需要思考的课题。 对零售批发企业来说&#xff0c;这些问题或许由来已久&#xff1a; &#xff08;1&#xff09;如何对各岗位的员工进行科学的考…