Flutter：在父状态更改时重新渲染子小部件

Question

因此，有一个具有 timer 值的有状态父级。该定时器可由用户重置。我还有一个带有动画控制器的子状态小部件。父级将 timer 值传递给此子级以重置动画。这是一些代码：

class _ParentState extends State<Parent> {
  int timer = 20;
  
  void _userInput() {
    setState(() {
      timer = 20;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Child(
      time: timer
    );
  }
}

注意：为了简单起见，这里被精简了

因此，当我的用户触发 _userInput 方法时，计时器值会更改，但孩子不会。这是我的完整子部件：

class TimerProgress extends StatefulWidget {
  TimerProgress({
    Key key,
    @required this.time,
    @required this.onCompleted
  }) : super(key: key);

  final int time;
  final Function onCompleted;

  @override
  _TimerProgressState createState() => _TimerProgressState();
}

class _TimerProgressState extends State<TimerProgress> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _widthAnimation;

  @override
  void initState() {
    _controller = AnimationController(
      duration: Duration(seconds: widget.time),
      vsync: this
    );

    _widthAnimation = Tween<double>(
      begin: 200,
      end: 0
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.linear
    ));

    _controller.addListener(() {
      if (_controller.value == 1) {
        widget.onCompleted();
      }
    });

    _controller.forward();

    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ...
  }
}

所以这一切都有效，但理想情况下我希望重置动画，这不起作用......

Answer 1

initState 每个状态实例仅运行一次。

在 didUpdateWidget 内实现重置时间：https://api.flutter.dev/flutter/widgets/RawScrollbarState/didUpdateWidget.html

您不能（因为它会导致递归循环，setState 将再次触发 didUpdateWidget）并且不应该（调用此方法后，build 被调用）具有在此方法中调用 setState。

可运行示例：https://www.dartpad.dev/848976603f866f4e3aa6030aba8addf7?null_safety=true