Flutter：保留旧值直到隐式动画完成

Question

我有这个代码：

AnimatedOpacity(
  duration: Duration(seconds: 1),
  opacity: _text == 'hide text'? 0 : 1,
  child: Text(_text),
)

在文本淡出期间显示文本旧值的最简单方法是什么（例如不是“隐藏文本”，而是文本更改为此之前的任何内容）？

Answer 1

您可以创建自己的小部件来执行您需要的操作。 我为您创建了一个示例：

结果

解释

首先，我创建了这段代码，其中主要值为“显示文本”，当用户按下按钮时，该值将更新为“隐藏文本”并且动画将开始。

有一个函数

fadeBuilder

可以用来验证何时要隐藏文本，在本示例中隐藏文本的条件是

value == 'hide text'

class _SampleViewState extends State<SampleView> {
  String _myText = 'show text';

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        MyAnimatedTextOpacity(
          value: _myText,
          fadeBuilder: (value) => value == 'hide text',
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _myText = 'hide text';
            });
          },
          child: const Text('change text'),
        )
      ],
    );
  }
}

现在这是自定义小部件：

typedef FadeBuilder = bool Function(String value);

class MyAnimatedTextOpacity extends StatefulWidget {
  const MyAnimatedTextOpacity({
    required this.value,
    required this.fadeBuilder,
    super.key,
  });

  final String value;
  final FadeBuilder fadeBuilder;

  @override
  State<MyAnimatedTextOpacity> createState() => _MyAnimatedTextOpacityState();
}

class _MyAnimatedTextOpacityState extends State<MyAnimatedTextOpacity> {
  late final String _value = widget.value;

  @override
  Widget build(BuildContext context) {
    return AnimatedOpacity(
      duration: const Duration(seconds: 1),
      opacity: widget.fadeBuilder(widget.value) ? 0 : 1,
      child: Text(_value),
    );
  }
}