Flutter 缩放动画组件封装与使用

在 Flutter 中,动画是为了提升用户体验而不可或缺的一部分。在应用程序中,缩放动画是常用的一种交互效果,可以使界面元素在用户交互时具有生动感。为了更好地组织代码和提高复用性,我们可以封装一个缩放动画组件,以下是一个简单的封装示例:

import 'package:flutter/material.dart';class ScaleAnimationWidget extends StatefulWidget {final Widget child;const ScaleAnimationWidget({Key? key, required this.child}) : super(key: key);_ScaleAnimationWidgetState createState() => _ScaleAnimationWidgetState();
}class _ScaleAnimationWidgetState extends State<ScaleAnimationWidget>with SingleTickerProviderStateMixin {late AnimationController _animationController;late Animation<double> _scaleAnimation;void initState() {super.initState();// 初始化动画控制器_animationController = AnimationController(vsync: this,duration: const Duration(milliseconds: 300),);// 定义缩放动画_scaleAnimation = Tween<double>(begin: 1.0, end: 0.8).animate(CurvedAnimation(parent: _animationController,curve: Curves.easeInOut,),);}void dispose() {_animationController.dispose();super.dispose();}Widget build(BuildContext context) {return GestureDetector(onTapDown: (_) {// 手指按下时启动缩放动画_animationController.forward();},onTapUp: (_) {// 手指抬起时反向播放缩放动画_animationController.reverse();},onTapCancel: () {// 手指取消点击时反向播放缩放动画_animationController.reverse();},child: ScaleTransition(scale: _scaleAnimation,child: widget.child,),);}
}

如何使用

在使用缩放动画组件时,只需将要添加动画效果的 Widget 作为 child 传入 ScaleAnimationWidget 中即可。以下是一个简单的示例:

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Scale Animation Example'),),body: Center(child: ScaleAnimationWidget(child: Container(width: 100,height: 100,color: Colors.blue,child: Center(child: Text('Tap me!',style: TextStyle(color: Colors.white),),),),),),),);}
}

在这个示例中,我们创建了一个简单的 Flutter 应用,包含一个蓝色的正方形,在正方形上应用了缩放动画。当用户点击正方形时,将会触发缩放效果,提供更加生动的用户体验。

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

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

相关文章

Java中List接口两个实现,ArrayList类和LinkedList类的常用方法(一)

List接口 要了解List接口&#xff0c;就不得不说起Java的集合框架。 &#xff08;该图来自菜鸟教程&#xff09; Collection接口和Map接口 Java 集合框架主要包括两种类型的容器&#xff0c;集合Collection和图Map。 Collection接口代表了单列集合&#xff0c;它包含了一组…

1月下半笔记(个人向)

最近才开始看d2l&#xff08;这种东西早该在两年前看的&#xff0c;拖到现在了&#xff09; 为了做项目还得学一手OpenGL&#xff08;被windows安装GLFW逼疯了&#xff09; 1.15 打完ICPC EC final回来&#xff0c;也许可以出一篇博客写下简单的题解。 对蛋白质相似空间子结…

如何获取一个德国容器

1.注册discord账号 discord注册网址&#xff1a;https://discord.com/ 下面是容器的discord邀请链接 https://discord.com/Discord邀请链接&#xff1a;https://discord.com/invite/jVMSWrchC4 2.进入discord群聊点击link 在点击网址&#xff0c;这个网址每星期都会变就是图…

Docker容器添加映射端口

方式一 简单粗暴&#xff08;需要等一段时间&#xff09; 直接给现在容器停了&#xff08;当然你要不想停也可以&#xff0c;只是打包会慢一点&#xff0c;当然我是没出意外&#xff0c;如果你怕出现特殊情况&#xff0c;那就先把容器停了&#xff09;&#xff0c;然后把这个容…

得实云打印助力CRM和电商平台高效无代码集成

简化打印流程&#xff0c;实现无缝连接 得实云打印提供的无缝连接体验&#xff0c;特别适合电商平台和客户服务系统。无需担忧传统打印设备的连接问题&#xff0c;得实云打印通过其API让用户能够轻松实现订单打印、物流单据打印等功能。通过得实的技术&#xff0c;用户能够随时…

C语言总结十三:程序环境和预处理详细总结

了解程序的运行环境可以让我们更加清楚的程序的底层运行的每一个步骤和过程&#xff0c;做到心中有数&#xff0c;预处理阶段是在预编译阶段完成&#xff0c;掌握常用的预处理命令语法&#xff0c;可以让我们正确的使用预处理命令&#xff0c;从而提高代码的开发能力和阅读别人…

图像处理中,采用极线约束准则来约束特征点匹配搜索空间,理论上在极线上进行搜索。这里的极线是什么线,怎么定义的?基本矩阵F和本质矩阵E有什么区别?

问题描述&#xff1a;图像处理中&#xff0c;采用极线约束准则来约束特征点匹配搜索空间&#xff0c;理论上在极线上进行搜索。这里的极线是什么线&#xff0c;怎么定义的&#xff1f;基本矩阵F和本质矩阵E有什么区别&#xff1f; 问题1解答&#xff1a; 极线是通过极线几何学…

qt-c++多窗口编程

1、QMessageBox 消息对话框 QMessageBox继承自QDialog&#xff0c;显示一个模态对话框。用于用户前台信息通知或询问用户问题&#xff0c;并且接收问题答案。 QDialog再Qt源码中&#xff0c;派生类往往都是一些在特定场合下使用的预设好的对话框窗口。这些窗口无需创建对象&…

蓝凌EIS智慧协同平台frm_form_upload.aspx接口存在任意文件上传漏洞

@[toc] 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 1. 蓝凌EIS智慧协同平台frm_form_upload.aspx接…

【QA】Linux-CentOS-解决mysqlclient无法安装

文章目录 文章概述解决方式1&#xff1a;直接找到mysqlclient的whl安装包python3.8-x86-64位其他适配版本的whl安装包 解决方法2&#xff1a;先安装相关依赖&#xff0c;再单独安装mysqlclient解决方式3&#xff1a;根据错误信息找到根源&#xff0c;一步一步解决 文章概述 li…

C#winform上位机开发学习笔记2-串口助手的中文支持功能添加

分为两步&#xff1a; 1.串口接收支持中文显示 1.1.在软件初始化时写入此代码以支持汉字显示 //串口接收支持中文显示serialPort1.Encoding Encoding.GetEncoding("GB2312"); //串口1的解码支持GB2312汉字 2.串口发送支持中文输出 //支持中文输出Encoding Chine…

【备战蓝桥杯】图的遍历问题

蓝桥杯备赛 | 洛谷做题打卡day10 文章目录 蓝桥杯备赛 | 洛谷做题打卡day10图的遍历题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示题解代码我的一些话 图的遍历 题目描述 给出 N N N 个点&#xff0c; M M M 条边的有向图&#xff0c;对于每个点 v v v&…

OpenAI 公布2024选举虚假信息打击计划

据统计&#xff0c;2024 年预计将有 50 多个国家举行大选&#xff0c;虚假信息的威胁成为人们关注的焦点。 人工智能聊天机器人 ChatGPT 和图像生成器 DALL-E 的开发商 OpenAI 近日宣布了一项新的措施&#xff0c;以防止在今年大选之前再次出现虚假信息滥用和误导事件。 本周…

Day31- 贪心算法part05

一、无重叠区间 题目一&#xff1a;453. 无重叠区间 435. 无重叠区间 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量&#xff0c;使剩余区间互不重叠 。 主要思想是优先保留结束时间早的区间&#xff0c;这样…

域环境权限提升

Windows系统配置错误 在Windows系统中&#xff0c;攻击者通常会通过系统内核溢出漏来提权&#xff0c;但是如果碰到无法通过系统内核溢出漏洞法国提取所在服务器权限的情况&#xff0c;就会系统中的配置错误来提权。Windows系统中常见哦欸之错误包括管理员凭证配置错误&#x…

思绪记忆:伦敦金是以美元计价的黄金!

伦敦金是以美元计价的黄金衍生投资品种&#xff0c;是一种交易网络遍及各个主要市场的黄金保证金交易方式。目前投资者通过香港到伦敦金平台入市&#xff0c;只需要付出2%的保证金&#xff0c;就可以拥有一手100盎司、价值20多万的标准化黄金合约的交易权益&#xff0c;无论在涨…

downloadjs插件简单使用

一、下载安装 npm install downloadjs -D二、引入 import download from "downloadjs"三、简单使用 download(url)需要注意的是&#xff0c;如果download(&#xff09;的参数大于1个&#xff0c;则第一个参数是数据流&#xff0c;则应该使用下面的方法来下载 fet…

Linux之Centos7常用命令及软件离线安装

Linux之Centos7常用命令及软件离线安装 文章目录 Linux之Centos7常用命令及软件离线安装1. Centos7-Minimal安装命令无法使用1. yum无法使用2.ifconfig命令无法使用 2. CentOS7常用配置修改1. 修改IP地址2. 修改hostname3. 修改hosts文件4. 用户和用户组5.安装vim及其他工具6. …

leetcode-杨辉三角ii

119. 杨辉三角 II 题解&#xff1a; 首先&#xff0c;我们需要创建一个列表来存储杨辉三角的每一行。然后&#xff0c;我们需要计算每一行的元素。每一行的每个元素都是上一行的两个相邻元素的和。第一个和最后一个元素总是1。最后&#xff0c;我们返回第rowIndex行。 class…

ChatGPT Plus续费充值,到账延迟,如何申诉?

ChatGPT Plus充值总是到账延迟比较严重&#xff0c;一般多是通过充值链接代充值遇到&#xff0c;如果是账号登陆充值&#xff0c;是即时到账。但是有的客户不愿意提供账号密码&#xff0c;遇到延迟到账的情况如何解决呢&#xff1f;客户可按下面操作申诉&#xff0c;可快速到账…