【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…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
