flutter使用AnimatedBuilder动画不播放

最新推荐文章于 2024-05-16 22:48:29 发布

yingkongshi07

最新推荐文章于 2024-05-16 22:48:29 发布

阅读量549

点赞数

分类专栏：小白学flutter踩坑系列文章标签： flutter

本文链接：https://blog.csdn.net/yingkongshi07/article/details/119040227

版权

当在 Flutter 中使用 AnimatedBuilder 时，如果动画没有播放，可能是因为缺少了适当的布局约束。解决方法是将 AnimatedBuilder 包裹在如 Center 这样的布局组件中，确保动画有正确的上下文。参考相关教程和代码示例，可以更好地理解和解决此类问题。

摘要由CSDN通过智能技术生成

解决方案:将AnimatedBuilder包裹在如Center的布局约束中

关键代码:

class GrowTransition extends StatelessWidget {
  GrowTransition({required this.child, required this.animation});

  late final Widget child;
  late final Animation<double> animation;

  @override
  Widget build(BuildContext context) => Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, child) => Container(
            child: child,
            height: animation.value,
            width: (animation).value,
          ),
          child: child,
        ),
      );
}

完整代码:

import 'package:flutter/material.dart';

///这是一个使用AnimatedBuilder拆分动画的,实现动画和widget进行分离的实例
class AniBuilder extends StatefulWidget {
  @override
  _AniBuilder createState() => _AniBuilder();
}

class _AniBuilder extends State<AniBuilder>
    with SingleTickerProviderStateMixin {
  Animation<double>? animatio