Flutter 中的 CompositedTransformTarget 小部件:全面指南

Flutter 中的 CompositedTransformTarget 小部件:全面指南

在Flutter的动画和高级布局系统中,CompositedTransformTarget是一个与CompositedTransformFollower配合使用的组件,用于创建硬件加速的跟随动画和视差效果。这种类型的动画通常用于实现复杂的动态效果,比如在滚动视图中保持某些元素的固定位置或创建交互式的视差背景。本文将详细介绍CompositedTransformTarget的使用方法,包括其基本概念、使用场景、高级技巧以及最佳实践。

什么是 CompositedTransformTarget?

CompositedTransformTarget是一个小部件,它充当CompositedTransformFollower的锚点。当CompositedTransformFollower组件跟随CompositedTransformTarget时,它可以根据CompositedTransformTarget的位置和变换动态调整自己的位置。

使用 CompositedTransformTarget

基本用法

CompositedTransformTarget的基本用法涉及到link参数,这是一个LayerLink对象,用于将CompositedTransformTargetCompositedTransformFollower关联起来。

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('CompositedTransformTarget Example')),body: Stack(alignment: Alignment.center,children: <Widget>[CompositedTransformTarget(link: LayerLink(), // 创建一个 LayerLinkchild: Container(width: 200,height: 200,color: Colors.blue,),),Positioned(left: 50,top: 50,child: CompositedTransformFollower(link: LayerLink(), // 使用与 CompositedTransformTarget 相同的 LayerLinktargetAnchor: Alignment.center,followerAnchor: Alignment.center,child: Container(width: 50,height: 50,color: Colors.red,),),),],),),);}
}

在上面的例子中,红色的Container将跟随蓝色的Container的位置,并且两者的中心点将会对齐。

创建动态效果

CompositedTransformTarget可以与动画控制器一起使用,以创建动态效果。

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {AnimationController _controller;Animation<Alignment> _animation;void initState() {super.initState();_controller = AnimationController(duration: const Duration(seconds: 2),vsync: this,)..repeat();_animation = AlignmentTween(begin: Alignment.topLeft,end: Alignment.bottomRight,).animate(_controller);}void dispose() {_controller.dispose();super.dispose();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Dynamic CompositedTransformTarget'),),body: Stack(alignment: Alignment.center,children: <Widget>[CompositedTransformTarget(link: LayerLink(), // 创建一个 LayerLinkchild: Container(width: 200,height: 200,color: Colors.green,),),Positioned(left: _animation.value.x * 100, // 使用动画值调整位置top: _animation.value.y * 100,child: CompositedTransformFollower(link: LayerLink(), // 使用与 CompositedTransformTarget 相同的 LayerLinktargetAnchor: Alignment.center,followerAnchor: Alignment.center,child: Container(width: 50,height: 50,color: Colors.yellow,),),),],),);}
}

高级用法

与其它动画结合使用

CompositedTransformTarget可以与Flutter中的其他动画组件结合使用,如RotationTransitionScaleTransition,来创建更复杂的动画效果。

Stack(alignment: Alignment.center,children: <Widget>[CompositedTransformTarget(link: LayerLink(),child: RotationTransition(turns: _controller,child: Container(width: 200,height: 200,color: Colors.purple,),),),CompositedTransformFollower(link: LayerLink(),targetAnchor: Alignment.center,followerAnchor: Alignment.center,child: ScaleTransition(scale: _controller,child: Container(width: 50,height: 50,color: Colors.orange,),),),],
)

响应式布局

CompositedTransformTarget可以根据屏幕尺寸或布局变化动态调整其变换。

CompositedTransformTarget(link: LayerLink(),child: Container(width: MediaQuery.of(context).size.width,height: 300,color: Colors.teal,),
)

最佳实践

注意性能

由于CompositedTransformTarget使用硬件加速,它可以提供高性能的动画效果。然而,过度使用或不当配置仍可能影响性能。确保测试动画在不同设备上的表现,并优化性能。

提供直观的反馈

使用CompositedTransformTarget可以提供直观的反馈,告知用户组件之间的关联。确保动画的目的是增强用户体验,而不是仅仅为了装饰。

保持动画简洁

虽然CompositedTransformTarget可以创建吸引人的动画效果,但保持动画简洁明了是非常重要的,避免过度动画可能会分散用户的注意力。

结论

CompositedTransformTarget是Flutter中一个非常有用的动画组件,它可以帮助开发者创建精确控制的跟随动画和视差效果,增强用户体验。通过本文的介绍,你应该已经了解了如何使用CompositedTransformTarget,以及如何在实际项目中应用它。记得在设计动画时,合理利用CompositedTransformTarget来提高应用程序的质量和用户体验。

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

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

相关文章

再论任何图≌自己这一几何最最起码常识推翻平面公理

黄小宁 有了解析几何使人类对直线和射线的认识有革命性的飞跃。几何学有史2300年来一直认定起点和射出的方向都相同的射线必重合&#xff0c;任两异射线必有全等关系&#xff1b;解析几何使我发现这是2300年肉眼直观错觉。 h定理&#xff08;参考文献中的定理&#xff09;&am…

台式机安装ubuntu过程

1.单系统参考 20231210-超详细Ubuntu20.04单系统安装_台式机安装ubuntu系统-CSDN博客 2.双系统参考 双系统启动效果_哔哩哔哩_bilibili 安装前一定要先清空电脑的硬盘数据&#xff0c;不然可能会出现以下图片异常 意思估计是分区被占用了&#xff0c;出现这个问题 &#xff0…

安全基础二

一、插件漏洞 统计使用了哪些插件这些插件有版本更新嘛检测这些插件是否存在已知漏洞 二、权限提升和持久化 SSRF&#xff08;Server-Side Request Forgery&#xff0c;服务器端请求伪造&#xff09; 想象一下&#xff0c;你是一个公司的内部员工&#xff08;服务器&#x…

知攻善防应急响应靶机训练-Web2

前言&#xff1a; 本次应急响应靶机采用的是知攻善防实验室的Web-2应急响应靶机 靶机下载地址为&#xff1a; https://pan.quark.cn/s/4b6dffd0c51a 相关账户密码 用户:administrator 密码:Zgsfqq.com 解题过程&#xff1a; 一、攻击者的IP地址&#xff08;两个&#xff09;…

防火墙基础基础篇:NAT转发功能之——Easy IP方式详解

防火墙基础基础篇&#xff1a;NAT转发功能之——Easy IP方式详解 1. 概念 Easy IP 是一种简化版的动态NAPT&#xff08;Network Address and Port Translation&#xff09;技术。在Easy IP中&#xff0c;我们只使用一个公网IP地址&#xff0c;无需建立公有IP地址池。这个公网…

2024 年科技裁员综合清单

推荐阅读&#xff1a; 独立国家的共同财富 美国千禧一代的收入低于父辈 创造大量就业机会却毁掉了财富 这四件事是创造国家财富的关键 全球财富报告证实联盟自始至终无能 美国人已陷入无休止债务循环中&#xff0c;这正在耗尽他们的财务生命 2024 年&#xff0c;科技行业…

基于Java的高校学生勤工助学优派系统的设计与实现(论文+源码)_kaic

摘 要 高校勤工助学管理系统的出现&#xff0c;让学生的工作更加标准,不仅仅使高校办公室的办公水平以及管理水平大大提高&#xff0c;还优化了勤工助学资金的使用方式方法&#xff0c;完善了资助所需费用的资源配置&#xff0c;可以卓有成效地缩减学校的管理经费。本系统主…

《python编程从入门到实践》day40

# 昨日知识点回顾 编辑条目及创建用户账户 暂没能解决bug&#xff1a; The view learning_logs.views.edit_entry didnt return an HttpResponse object. It returned None instead.# 今日知识点学习 19.2.5 注销 提供让用户注销的途径 1.在base.html中添加注销链接 …

利用PyCSP3库(含大量全局约束)进行组合约束建模

文章目录 1. 什么是 PyCSP3 ?2. 安装方法(Windows)2.1 通过 Google_colab 直接运行2.2 通过 pip 进行安装3. 快速入门3.1 声明变量3.2 更新约束3.3 定义目标3.4 常用的全局约束1. 什么是 PyCSP3 ? PyCSP3 是 Python 中的一个库,用于对组合约束问题进行建模,包括 约束满足…

esp8266的rtos和nonos区别

https://bbs.espressif.com/viewtopic.php?t75242#p100294 https://blog.csdn.net/ydogg/article/details/72598752

Akamai 最新版逆向分析 akamai逆向 dhl网址

原创文章&#xff0c;请勿转载&#xff01; 本文内容仅限于安全研究&#xff0c;不公开具体源码。维护网络安全&#xff0c;人人有责。 URL&#xff08;base64加密处理&#xff09;&#xff1a;aHR0cHM6Ly93d3cuZGhsLmNvbS9jbi16aC9ob21lL3RyYWNraW5nL3RyYWNraW5nLWVjb21tZXJ…

[机缘参悟-190] - 《道家-水木然人间清醒1》读书笔记 -13- 关系界限 - IT人学会欣赏自己、与自己孤独相处,向内求

目录 前言&#xff1a; 1. 做人不求全&#xff0c;做事不求多 2. 一个人成熟的标志 3. 不必向别人解释自己 4. 孤独常伴&#xff0c;唯有内心强大 5. 下一轮文明的引领者 6. 外求与内求 7. 总有人能让我们欣赏 8. 凶狠和温柔 9. 陪伴自己 10. 珍惜拥有 11. 抽离感 …

Java | Leetcode Java题解之第115题不同的子序列

题目&#xff1a; 题解&#xff1a; class Solution {public int numDistinct(String s, String t) {int m s.length(), n t.length();if (m < n) {return 0;}int[][] dp new int[m 1][n 1];for (int i 0; i < m; i) {dp[i][n] 1;}for (int i m - 1; i > 0; …

计算机网络路由协议之内部网关协议RIP例题与详解

互联网的路由选择协议 路由器转发表的路由协议如何得出呢&#xff1f; 使用路由算法进行&#xff0c;路由算法可以分为两类&#xff1a; 静态路由选择策略和动态路由选择策略。 静态路由选择策略&#xff1a; 非自适应路由选择&#xff0c;人工配置每一条路由。 动态路由选…

Lombok,一款超级强大的Java工具库

在软件开发过程中&#xff0c;繁琐的模板代码经常让开发者感到烦恼。 Lombok 是一款 Java 库&#xff0c;能够帮助开发者减少这些冗余代码&#xff0c;提高开发效率。本文将介绍 Lombok 的基本概念、安装和配置方法&#xff0c;以及如何在实际项目中使用它。 Lombok 是什么 L…

图解 Transformer

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学. 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总合集&…

数据赋能(101)——概念:数据治理、数据管理

此文为本人学习与提高能力的笔记。 数据治理与数据管理这两个术语&#xff0c;尽管在数据管理的领域中经常相伴出现&#xff0c;且在某些情境下可能被视为具有相似的语义范畴&#xff0c;但为了确保术语使用的精准度和专业性&#xff0c;我们必须对它们有更为深入的认知。我们…

已解决java.lang.annotation.AnnotationFormatError: 注解格式错误的正确解决方法,亲测有效!!!

已解决java.lang.annotation.AnnotationFormatError: 注解格式错误的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 解决思路 解决方法 检查注解定义 检查注解的使用 确认依赖版本和兼容性 检查默认值和实际值 检查编…

安装ROS 2 Jazzy Jalisco

参考&#xff1a; https://docs.ros.org/en/jazzy/Installation/Ubuntu-Install-Debians.html 先要安装一个ubuntu&#xff0c;对老旧硬件最友好的版本Lubuntu&#xff1a; 安装Lubuntu24.04-CSDN博客 过程&#xff1a; 按文档一步步走下去&#xff1a; 遇到问题查找通用案…

鸿蒙ArkTS声明式开发:跨平台支持列表【按键事件】

按键事件 按键事件指组件与键盘、遥控器等按键设备交互时触发的事件&#xff0c;适用于所有可获焦组件&#xff0c;例如Button。对于Text&#xff0c;Image等默认不可获焦的组件&#xff0c;可以设置focusable属性为true后使用按键事件。 说明&#xff1a; 开发前请熟悉鸿蒙开…