没有动画效果

来源:7-8 动画Animation开发指南-AnimatedWidget与AnimatedBuilder-3【跟着做】

Svanur

2021-11-19

class LogoWidget extends StatelessWidget {
const LogoWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10),
child: const FlutterLogo(),
);}}
class GrowTransition extends StatelessWidget {
GrowTransition({required this.child, required this.animation});
final Widget child;
final Animation animation;
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: animation,
builder: (context,child)=>Container(
height: animation.value,
width: animation.value,
child: child,
),
child: child,
);}}
class _LogoAppState extends State with SingleTickerProviderStateMixin {
late Animation animation;
late AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
animation = Tween(begin: 0, end: 300).animate(controller);
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GrowTransition(child:const LogoWidget(),animation: animation);
}}

写回答

1回答

CrazyCodeBoy

2021-11-19

对照下这块课程源码检查下你的代码实现看是否有不一样的地方呢:https://git.imooc.com/coding-321/flutter_trip/src/master/doc/%E5%8A%A8%E7%94%BBAnimation%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md

0
3
qq_麻烦_uwxM46
回复
Junble
他这里是因为直接 return AnimatedBuild 导致无效的,老师代码是用Center包裹的,如果外层不用Center包裹就会变成 Container 包 Container,那样就不会有动画效果 正确的: Widget build(BuildContext context) { return Center( child: AnimatedBuilder( animation: animation, builder: (context, child) => Container( height: animation.value, width: animation.value, child: child, ), child: child, ), ); }
2022-09-19
共3条回复

Flutter从入门到进阶 实战携程网App 一网打尽核心技术

解锁Flutter开发新姿势,,系统掌握Flutter开发核心技术。

4788 学习 · 3270 问题

查看课程