Flutter开发

2023-06-04 23:58| 来源: 网络整理| 查看: 265

在实际项目中，往往会有很多个动画集于一个界面，这时候如果每个界面都实现一遍动画，会出现很多重复代码。那么，Animatedbuilder就可以解决此类问题了。

AnimatedBuilder类继承AnimatedWidget类，所以它可以直接作为一个组件来使用。AnimatedBuilder不需要知道如何渲染组件的，也不需要知道如何管理动画对象，只需调用build。使用AnimatedBuilder来实现Logo放大–>缩小无限循环的动画。代码如下： import 'package:flutter/material.dart'; class AnimatedBuilderPage extends StatefulWidget { final String title; const AnimatedBuilderPage({Key? key, required this.title}) : super(key: key); @override State createState() => _AnimatedBuilderPageState(); } class _AnimatedBuilderPageState extends State with SingleTickerProviderStateMixin { Animation? _animation; AnimationController? _animationController; @override void initState() { super.initState(); _animationController = AnimationController(duration: const Duration(seconds: 2), vsync: this); _animation = Tween(begin: 0.0, end: 200.0).animate(_animationController!) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _animationController!.reverse(); } else if (status == AnimationStatus.dismissed) { _animationController!.forward(); } }); _animationController!.forward(); } @override void dispose() { _animationController!.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return AnimationEffect( animation: _animation!, child: const FlutterLogoWidget()); } } class FlutterLogoWidget extends StatelessWidget { const FlutterLogoWidget({super.key}); @override Widget build(BuildContext context) { return const FlutterLogo(); } } class AnimationEffect extends StatelessWidget { final Widget child; final Animation animation; const AnimationEffect( {super.key, required this.child, required this.animation}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('AnimatedBuilder'), ), body: AnimatedBuilder( animation: animation, builder: (BuildContext context, Widget? child) { return Center( child: SizedBox( width: animation.value, height: animation.value, child: child, ), ); }, child: child, ), ); } }

这样就将动画与执行动画的组件彻底分离了，Widget组件FlutterLogo只做显示用，这样利于后期的维护。 Flutter基于AnimatedBuilder封装了许多动画类，如AnimatedContainer、DecoratedBoxTransition、FadeTransition、RotationTransition和ScaleTransition等。

【本文地址】

公司简介

联系我们