动画无法正常播放？

Question

当我按下click按钮时，我希望第一个圆圈上下移动！

动画不起作用。 我尝试过多次重新启动应用程序，但问题仍然存在。 有什么问题吗？

import 'package:flutter/material.dart';

    class Pin extends StatefulWidget {
    @override
    _PinState createState() => _PinState();
    }

    class _PinState extends State<Pin> with SingleTickerProviderStateMixin {
    AnimationController _controller;
    Animation<EdgeInsets> _animation;
    @override
    void initState() {
        super.initState();
        _controller = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: 300),
        );

        _animation = EdgeInsetsTween(
        begin: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 0),
        end: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 12),
        ).animate(CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
        ));

        //_controller.forward();
        _controller.addStatusListener((status) {
        if (status == AnimationStatus.completed) {
            _controller.reverse();
        }
        });
    }

    @override
    Widget build(BuildContext context) {
        return Container(
        padding: const EdgeInsets.all(100),
        width: double.infinity,
        height: MediaQuery.of(context).size.height * 0.6,
        color: const Color.fromRGBO(113, 201, 206, 1),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[

            Container(
                width: 233,
                height: 44,
                color: Colors.blue,
                child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                    Container(
                    padding: _animation.value,
                    height: double.infinity,
                    color: Colors.red,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                        width: 32,
                        height: 32,
                        decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        ),
                    ),
                    ),
                    Container(
                    height: double.infinity,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                        width: 32,
                        height: 32,
                        decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        ),
                    ),
                    ),
                    Container(
                    height: double.infinity,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                        width: 32,
                        height: 32,
                        decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        ),
                    ),
                    ),
                    Container(
                    height: double.infinity,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                        width: 32,
                        height: 32,
                        decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        ),
                    ),
                    ),
                ],
                ),
            ),
            Container(
                child: RaisedButton(
                onPressed: () {
                    setState(() {
                    _controller.stop();
                    _controller.forward();
                    print("Animation Started");
                    });
                },
                child: Text("Chick!"),
                ),
            ),
            ],
        ),
        );
    }
    }

所有元素均由容器组成，该容器中有一个大的蓝色矩形容器，内部有四个小容器，内部有一个带圆角的容器。

Answer 1

您的代码看起来不错，但缺少一部分，

您应该收听AnimationController的每次更改，并每次重新构建应设置动画的视图部分。

只需在您的initState()方法中添加它：

_controller.addListener((){
    setState(() {});
});

此外，您可以将setState中的RaisedButton onPressed:删除，而不必将其保存在那里。