【Flutter学习笔记】10.3 组合实例:TurnBox
参考资料:《Flutter实战·第二版》 10.3 组合实例:TurnBox
这里尝试实现一个更为复杂的例子,其能够旋转子组件。Flutter中的RotatedBox可以旋转子组件,但是它有两个缺点:
- 一是只能将其子节点以90度的倍数旋转
- 二是当旋转的角度发生变化时,旋转角度更新过程没有动画
因此,这里将自定义一个TurnBox,不仅可以设置任意角度旋转的子Widget,还能再角度发生改变时执行一个过渡动画,同时,还可以手动设置动画的执行时长。
首先,组件一定是一个动画组件,需要实现SingleTickerProviderStateMixin并设置Controler对象,这里没有定义AnimationController对象,直接在Controler内部设置起始值,默认值是[0, 1],类型为浮点数。输入参数有旋转的多少、旋转动画的时长和子Widget,其具有默认的初始值。
在组件初始化阶段,首先定义_controller,其取值范围为 [ − ∞ , + ∞ ] [-\infin,+\infin] [−∞,+∞],并将其初始值设为传入参数,否则为默认值0。
组件通过RotationTransition构建,需传入一个Animation<double>对象并设置子Widget。
当外部传入的参数turns或speed变化时(turns为主要控制变量),则执行动画到目标状态。
注意在组件销毁的dispose()函数当中销毁_controller防止内存泄漏的问题。
class TurnBox extends StatefulWidget {const TurnBox({Key? key,this.turns = .0, //旋转的“圈”数,一圈为360度,如0.25圈即90度this.speed = 200, //过渡动画执行的总时长this.child}) :super(key: key);final double turns;final int speed;final Widget? child;TurnBoxState createState() => TurnBoxState();
}class TurnBoxState extends State<TurnBox>with SingleTickerProviderStateMixin {late AnimationController _controller;void initState() {super.initState();_controller = AnimationController(vsync: this,lowerBound: -double.infinity,upperBound: double.infinity);_controller.value = widget.turns;}void dispose() {_controller.dispose();super.dispose();}Widget build(BuildContext context) {return RotationTransition(turns: _controller,child: widget.child,);}void didUpdateWidget(TurnBox oldWidget) {super.didUpdateWidget(oldWidget);//旋转角度发生变化时执行过渡动画if (oldWidget.turns != widget.turns) {_controller.animateTo(widget.turns,duration: Duration(milliseconds: widget.speed??200),curve: Curves.easeOut,);}}
}
下面可以测试一下定义好组件的功能,大小两个组件全部采用一个state控制,但是旋转速度不同,大的会慢一些:
class TurnBoxRoute extends StatefulWidget {const TurnBoxRoute({Key? key}) : super(key: key);TurnBoxRouteState createState() => TurnBoxRouteState();
}class TurnBoxRouteState extends State<TurnBoxRoute> {double _turns = .0;Widget build(BuildContext context) {return Center(child: Column(mainAxisSize: MainAxisSize.min,children: <Widget>[TurnBox(turns: _turns,speed: 500,child: const Icon(Icons.refresh,size: 50,),),TurnBox(turns: _turns,speed: 1000,child: const Icon(Icons.refresh,size: 150.0,),),ElevatedButton(child: const Text("顺时针旋转1/5圈"),onPressed: () {setState(() {_turns += .2;});},),const SizedBox(height: 10,),ElevatedButton(child: const Text("逆时针旋转1/5圈"),onPressed: () {setState(() {_turns -= .2;});},)],),);}
}

这部分内容最常用到的函数就是didUpdateWidget(),其在传入参数发生变化时调用。例如我们要实现一个解析url链接的富文本文件,那么在一开始要对传入的文本进行解析,而后才能生成对应的Widget。解析的过程与构建过程分开较为合适,可以保证UI发生变化时,所需的文本不会被反复解析,以减少不必要的耗时,因此放在initState()中是一个不错的选择。但是,当传入的参数发生变化时(组件树结构改变),initState()并不执行,文本内容不会更新。因此,可以将解析过程放在didUpdateWidget()中,这样当参数变化时,能够及时对UI进行重构:
class _MyRichTextState extends State<MyRichText> {TextSpan _textSpan;Widget build(BuildContext context) {return RichText(text: _textSpan,);}TextSpan parseText(String text) {// 耗时操作:解析文本字符串,构建出TextSpan。// 省略具体实现。}void initState() {_textSpan = parseText(widget.text)super.initState();}void didUpdateWidget(MyRichText oldWidget) {if (widget.text != oldWidget.text) {_textSpan = parseText(widget.text);}super.didUpdateWidget(oldWidget);}
}
虽然这看起来是一个简单的方式,但是在实际开发过程中很容易被忽略,一定要注意传入参数是否会经常发生改变,及时更新输入状态。
相关文章:
【Flutter学习笔记】10.3 组合实例:TurnBox
参考资料:《Flutter实战第二版》 10.3 组合实例:TurnBox 这里尝试实现一个更为复杂的例子,其能够旋转子组件。Flutter中的RotatedBox可以旋转子组件,但是它有两个缺点: 一是只能将其子节点以90度的倍数旋转二是当旋转…...
性能测试入门 —— 什么是性能测试PTS?
性能测试PTS(Performance Testing Service)是一款简单易用,具备强大的分布式压测能力的SaaS压测平台。 PTS可以模拟复杂的业务场景,并快速精准地调度不同规模的流量,同时提供压测过程中多维度的监控指标和日志记录。您…...
【机器学习】基于变色龙算法优化的BP神经网络分类预测(SSA-BP)
目录 1.原理与思路2.设计与实现3.结果预测4.代码获取 1.原理与思路 【智能算法应用】智能算法优化BP神经网络思路【智能算法】变色龙优化算法(CSA)原理及实现 2.设计与实现 数据集: 数据集样本总数2000 多输入多输出:样本特征24ÿ…...
pytorch中tensor类型转换的几个函数
目录 IntTensor转FloatTensor FloatTensor转IntTensor Tensor类型变为python的常规类型 IntTensor转FloatTensor .float函数: FloatTensor转IntTensor .int函数 Tensor类型变为python的常规类型 item函数...
深入理解Elasticsearch高效原理
在当今数据驱动的世界中,能够快速有效地存储、搜索和分析庞大数据集变得至关重要。Elasticsearch是一个强大的开源搜索和分析引擎,专为云计算中心而设计,能够提供快速的搜索功能,并且能够扩展到包含数百个服务器的集群,…...
http和socks5代理哪个隐蔽性更强?
HTTP代理和SOCKS5代理各有其优缺点,但就隐蔽性而言,SOCKS5代理通常比HTTP代理更隐蔽。以下是它们的比较: HTTP代理: 透明性较高:HTTP代理在HTTP头中会透露原始客户端的IP地址,这使得它相对不太隐蔽。…...
邮箱的正则表达式
一、 背景 项目中要给用户发送邮件,这时候需要校验用户输入的邮箱的有有效性,这肯定用正则呀。 虽然没有统一的邮箱账号格式,但是所有邮箱都符合“名称域名”的规律。对于名称和域名的字符限制,我们可以根据项目的情况定义一个&a…...
blender插件笔记
目录 文件拖拽导入 smpl导入导出 好像可以导入动画 smpl_blender_addon导入一帧 保存pose 导入导出完整代码 文件拖拽导入 https://github.com/mika-f/blender-drag-and-drop 支持格式: *.abc*.bvh*.dae*.fbx*.glb*.gltf*.obj*.ply*.stl*.svg*.usd*.usda*.…...
解释关系型数据库和非关系型数据库的区别
一、解释关系型数据库和非关系型数据库的区别 关系型数据库和非关系型数据库在多个方面存在显著的区别。 首先,从数据存储方式来看,关系型数据库采用表格形式,数据存储在数据表的行和列中,且数据表之间可以关联存储,…...
YAML-02-yml 配置文件 java 整合使用 yamlbeans + snakeyaml + jackson-dataformat-yaml
java 中处理 yml 的开源组件是什么? 在Java中处理YAML(YAML Aint Markup Language)格式的开源组件有很多,其中一些比较常用的包括: SnakeYAML: SnakeYAML 是一个Java库,用于解析和生成YAML格式…...
【综述+LLMs】国内团队大语言模型综述:A Survey of Large Language Models (截止2023.11.24)
Github主页: https://github.com/RUCAIBox/LLMSurvey 中文版v10:https://github.com/RUCAIBox/LLMSurvey/blob/main/assets/LLM_Survey_Chinese.pdf 英文版v13: https://arxiv.org/abs/2303.18223 解析:大语言模型LLM入门看完你就懂了(一&…...
开始喜欢上了runnergo,JMeter out了?
RunnerGo是一款基于Go语言、国产自研的测试平台。它支持高并发、分布式性能测试。和JMeter不一样的是,它采用了B/S架构,更灵活、更方便。而且,除了API测试和性能测试,RunnerGo还加上了UI测试和项目管理等实用功能,让测…...
LLM - 大语言模型的分布式训练 概述
欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/136924304 大语言模型的分布式训练是一个复杂的过程,涉及到将大规模的计算任务分散到多个计算节点上。这样做的目的是为了处…...
Spring Cloud Alibaba 整合Seata分布式事务
目录 前言步骤引入相关maven依赖添加相关配置Client端配置注册中心Server端配置注册中心Seata-Server相关配置启动seata-server 使用方法Seata AT 模式整体机制 步骤初始化表结构标记注解GlobalTransactional 总结 前言 在数字化转型的浪潮下,企业业务系统的复杂度…...
unity 多屏幕操作
想了解基础操作请移步:(重点是大佬写的好,这里就不再赘述) Unity 基础 之 使用 Display 简单的实现 多屏幕显示的效果_unity display-CSDN博客 在panel上也可以通过获取 Canvas,来达到切换多屏幕的操作, …...
4、Jenkins持续集成-用户权限和凭证管理
文章目录 一、用户权限管理1、安装用户权限管理插件2、开启权限全局安全配置3、创建角色4、创建用户5、给用户分配角色6、创建项目测试权限二、凭证管理1、安装凭证管理插件2、安装Git插件和工具2.1 用户密码类型2.2 SSH密钥类型一、用户权限管理 利用Role-based Authorizatio…...
K8s-网络原理-中篇
引言 本文是《深入剖析 K8s》的学习笔记,相关图片和案例可从https://github.com/WeiXiao-Hyy/k8s_example中获取,欢迎 ⭐️! 上篇主要介绍了 Flannel 插件为例,讲解了 K8s 里容器网络和 CNI 插件的主要工作原理。还有一种“纯三层”的网络方…...
vue基础——java程序员版(vue路由)
1、引入路由 在控制台执行vue ui,在插件市场里可以找到vue-router并导入。 一般情况下,vue会自动在main,js中引入vue-router,如下: import Vue from vue import App from ./App.vue import ./plugins/element.js import rou…...
【vue3学习之路(一)】
文章目录 前言一、vue3项目创建1.1环境准备1.1.1 基于 vue-cli 创建(脚手架创建)1.1.2 基于 vite 创建(推荐) 二、熟悉流程总结 前言 参考视频:https://www.bilibili.com/video/BV1Za4y1r7KE?p10&spm_id_frompag…...
基于Spring Boot网络相册设计与实现
摘 要 网络相册设计与实现的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品,体验高科技时代带给人们的方便,同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓,iOS相比较起来&am…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人,点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置,详见说明文档 成功后,记录Webhook 2 API文档说明 点击设置说明 查看自…...
