Flutter AnimatedSwitcher 每次我進入文本字段時都會重建

Question

在下面的代碼中，我希望 AnimatedSwitcher 下的 Text 僅在按下 FlatButton 時設置動畫，但它會為我在 TextField 中輸入的每個字符設置動畫。 由於 TextField 在其 onChanged 方法中有一個 setState，因此每次輸入字符時都會觸發 animation。

如何防止 AnimatedSwitcher 在每次調用 setState 方法時重新構建，並且僅在其子項的值已更新時才重新構建？

class _TestScreenState extends State<TestScreen> {
  int _counter = 0;
  int _value = 0;
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedSwitcher(
            duration: Duration(milliseconds: 300),
            child: Text(_counter.toString(),
                key: UniqueKey(), style: TextStyle(fontSize: 50)),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return FadeTransition(
                opacity: animation,
                child: ScaleTransition(
                  scale: animation.status == AnimationStatus.dismissed
                      ? Tween<double>(begin: .5, end: 1).animate(animation)
                      : AlwaysStoppedAnimation(1.0),
                  child: child,
                ),
              );
            },
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Text(
              _value.toString(),
              style: TextStyle(fontSize: 20),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: TextField(
              controller: controller,
              keyboardType: TextInputType.number,
              textAlign: TextAlign.center,
              onChanged: (val) {
                setState(() {
                  _value = int.parse(val) * 5;
                });
              },
              decoration: InputDecoration(labelText: "Enter amount"),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: FlatButton(
              onPressed: () => setState(() {
                _counter = int.parse(controller.text) * 5;
              }),
              child: Text('Tap to change value'),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

嘗試這個

class _TestScreenState extends State<TestScreen> {
  int _counter = 0;
  int _value = 0;
  TextEditingController controller = TextEditingController();

  @override
  void initState() {
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedSwitcher(
            duration: Duration(milliseconds: 300),
            child: Text(_counter.toString(), key: ValueKey<int>(_counter), style: TextStyle(fontSize: 50)),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return FadeTransition(
                opacity: animation,
                child: ScaleTransition(
                  scale: animation.status == AnimationStatus.dismissed
                      ? Tween<double>(begin: .5, end: 1).animate(animation)
                      : AlwaysStoppedAnimation(1.0),
                  child: child,
                ),
              );
            },
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Text(
              _value.toString(),
              style: TextStyle(fontSize: 20),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: TextField(
              controller: controller,
              keyboardType: TextInputType.number,
              textAlign: TextAlign.center,
              onChanged: (val) {
                setState(() {
                  _value = int.parse(val) * 5;
                });
              },
              decoration: InputDecoration(labelText: "Enter amount"),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: FlatButton(
              onPressed: () => setState(() {
                _counter = int.parse(controller.text) * 5;
              }),
              child: Text('Tap to change value'),
            ),
          )
        ],
      ),
    );
  }
}