【Flutter学习笔记】10.3 组合实例:TurnBox

2024-03-23 04:52

本文主要是介绍【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。
当外部传入的参数turnsspeed变化时(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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/837188

相关文章

Linux lvm实例之如何创建一个专用于MySQL数据存储的LVM卷组

《Linuxlvm实例之如何创建一个专用于MySQL数据存储的LVM卷组》:本文主要介绍使用Linux创建一个专用于MySQL数据存储的LVM卷组的实例,具有很好的参考价值,希望对大家有所帮助,... 目录在Centos 7上创建卷China编程组并配置mysql数据目录1. 检查现有磁盘2. 创建物理卷3. 创

Java List排序实例代码详解

《JavaList排序实例代码详解》:本文主要介绍JavaList排序的相关资料,Java排序方法包括自然排序、自定义排序、Lambda简化及多条件排序,实现灵活且代码简洁,文中通过代码介绍的... 目录一、自然排序二、自定义排序规则三、使用 Lambda 表达式简化 Comparator四、多条件排序五、

Java实例化对象的​7种方式详解

《Java实例化对象的​7种方式详解》在Java中,实例化对象的方式有多种,具体取决于场景需求和设计模式,本文整理了7种常用的方法,文中的示例代码讲解详细,有需要的可以了解下... 目录1. ​new 关键字(直接构造)​2. ​反射(Reflection)​​3. ​克隆(Clone)​​4. ​反序列化

重新对Java的类加载器的学习方式

《重新对Java的类加载器的学习方式》:本文主要介绍重新对Java的类加载器的学习方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍1.1、简介1.2、符号引用和直接引用1、符号引用2、直接引用3、符号转直接的过程2、加载流程3、类加载的分类3.1、显示

Python解决雅努斯问题实例方案详解

《Python解决雅努斯问题实例方案详解》:本文主要介绍Python解决雅努斯问题实例方案,雅努斯问题是指AI生成的3D对象在不同视角下出现不一致性的问题,即从不同角度看物体时,物体的形状会出现不... 目录一、雅努斯简介二、雅努斯问题三、示例代码四、解决方案五、完整解决方案一、雅努斯简介雅努斯(Janu

Flutter实现文字镂空效果的详细步骤

《Flutter实现文字镂空效果的详细步骤》:本文主要介绍如何使用Flutter实现文字镂空效果,包括创建基础应用结构、实现自定义绘制器、构建UI界面以及实现颜色选择按钮等步骤,并详细解析了混合模... 目录引言实现原理开始实现步骤1:创建基础应用结构步骤2:创建主屏幕步骤3:实现自定义绘制器步骤4:构建U

Python开发文字版随机事件游戏的项目实例

《Python开发文字版随机事件游戏的项目实例》随机事件游戏是一种通过生成不可预测的事件来增强游戏体验的类型,在这篇博文中,我们将使用Python开发一款文字版随机事件游戏,通过这个项目,读者不仅能够... 目录项目概述2.1 游戏概念2.2 游戏特色2.3 目标玩家群体技术选择与环境准备3.1 开发环境3

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SQL表间关联查询实例详解

《SQL表间关联查询实例详解》本文主要讲解SQL语句中常用的表间关联查询方式,包括:左连接(leftjoin)、右连接(rightjoin)、全连接(fulljoin)、内连接(innerjoin)、... 目录简介样例准备左外连接右外连接全外连接内连接交叉连接自然连接简介本文主要讲解SQL语句中常用的表