客户端 网站开发 手机软件开发,网站系统改教程,电商网站图片,关键词优化心得参考资料#xff1a;《Flutter实战第二版》 10.3 组合实例#xff1a;TurnBox 这里尝试实现一个更为复杂的例子#xff0c;其能够旋转子组件。Flutter中的RotatedBox可以旋转子组件#xff0c;但是它有两个缺点#xff1a;
一是只能将其子节点以90度的倍数旋转二是当旋转…参考资料《Flutter实战·第二版》 10.3 组合实例TurnBox 这里尝试实现一个更为复杂的例子其能够旋转子组件。Flutter中的RotatedBox可以旋转子组件但是它有两个缺点
一是只能将其子节点以90度的倍数旋转二是当旋转的角度发生变化时旋转角度更新过程没有动画
因此这里将自定义一个TurnBox不仅可以设置任意角度旋转的子Widget还能再角度发生改变时执行一个过渡动画同时还可以手动设置动画的执行时长。 首先组件一定是一个动画组件需要实现SingleTickerProviderStateMixin并设置Controler对象这里没有定义AnimationController对象直接在Controler内部设置起始值默认值是[0, 1]类型为浮点数。输入参数有旋转的多少、旋转动画的时长和子Widget其具有默认的初始值。 在组件初始化阶段首先定义_controller其取值范围为 [ − ∞ , ∞ ] [-\infin,\infin] [−∞,∞]并将其初始值设为传入参数否则为默认值0。 组件通过RotationTransition构建需传入一个Animationdouble对象并设置子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;overrideTurnBoxState createState() TurnBoxState();
}class TurnBoxState extends StateTurnBoxwith SingleTickerProviderStateMixin {late AnimationController _controller;overridevoid initState() {super.initState();_controller AnimationController(vsync: this,lowerBound: -double.infinity,upperBound: double.infinity);_controller.value widget.turns;}overridevoid dispose() {_controller.dispose();super.dispose();}overrideWidget build(BuildContext context) {return RotationTransition(turns: _controller,child: widget.child,);}overridevoid 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);overrideTurnBoxRouteState createState() TurnBoxRouteState();
}class TurnBoxRouteState extends StateTurnBoxRoute {double _turns .0;overrideWidget 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 StateMyRichText {TextSpan _textSpan;overrideWidget build(BuildContext context) {return RichText(text: _textSpan,);}TextSpan parseText(String text) {// 耗时操作解析文本字符串构建出TextSpan。// 省略具体实现。}overridevoid initState() {_textSpan parseText(widget.text)super.initState();}overridevoid didUpdateWidget(MyRichText oldWidget) {if (widget.text ! oldWidget.text) {_textSpan parseText(widget.text);}super.didUpdateWidget(oldWidget);}
}虽然这看起来是一个简单的方式但是在实际开发过程中很容易被忽略一定要注意传入参数是否会经常发生改变及时更新输入状态。
