Question

我有一个具有正常/动画状态的自定义窗口小部件。有时我想成为动画，有时是静态的。

我做了一个简单的测试项目来演示我的问题：测试页包含我的自定义小部件（.iloc）和2个用于启动/停止对记分板进行动画处理的按钮。我的问题是，即使我开始制作动画，记分板也没有动画。

这是我的代码：

ScoreBoard：

TestPage

ScoreBoard小部件：

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  bool _animate;

  @override
  void initState() {
    _animate = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          ScoreBoard(
            text: "Hello, world!",
            animate: _animate,
          ),
          FlatButton(
            child: Text("START animation"),
            onPressed: () {
              setState(() {
                _animate = true;
              });
            },
          ),
          FlatButton(
            child: Text("STOP animation"),
            onPressed: () {
              setState(() {
                _animate = false;
              });
            },
          ),
        ],
      ),
    );
  }
}

您愿意帮助我吗？预先感谢！

Answer 1

答案

如果您初始化AnimationController小部件并且未为lowerBound和upperBound指定参数（在这种情况下），则动画将默认以{{1 }} 0.0。

AnimationController（{double value，Duration duration，String debugLabel，double lowerBound：0.0，double upperBound：1.0，AnimationBehavior animationBehavior：AnimationBehavior.normal，@required TickerProvider vsync}）创建一个动画控制器。 [...]

https://docs.flutter.io/flutter/animation/AnimationController-class.html

如果初始化小部件lowerBound的状态，则方法ScoreBoard在应用程序的整个生命周期内仅被调用一次。方法forward使您的动画在1秒内从forward（0.0）增加到lowerBound（1.0）。

开始向前（朝末尾）运行此动画。

https://docs.flutter.io/flutter/animation/AnimationController/forward.html

在我们的情况下，一旦方法upperBound被调用就无法返回。我们只能停止动画。

按Ctrl + F5组合键可完全重新启动应用程序，以查看动画。为了更加清晰，请将动画的持续时间更改为10秒。

顺便说一句。从Dart 2开始，您无需使用forward关键字。

new

示例

要查看会发生什么，可以将其添加到您的@override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(seconds: 10), vsync: this, )..forward(); }方法中：

build

...，并且不要在@override Widget build(BuildContext context) { // Execute 'reverse' if the animation is completed if (_controller.isCompleted) _controller.reverse(); else if (_controller.isDismissed) _controller.forward(); // ...方法中调用方法forward：

initState

从外部小部件触发小部件动画

1 个答案: