flutter - 文本数据更改时颤动动画过渡

Question

Text当元素的数据发生变化时，Flutter 有没有办法为过渡设置动画？

我有一个new Text(_value)元素_value根据滑块位置进行更改。有什么方法可以为过渡设置动画，使其不像刚改变时那样“突然” _value？

我知道有一些小部件可以为两个不同小部件之间的过渡设置动画，但我只是在更改data同一Text个小部件的属性。

Answer 1

我需要同样的东西，所以我创建了一个cross_fade小部件。

https://gist.github.com/cirediew/38abb52e27278dae2b8eba77ed4b3bdc

initialData第一次 需要显示。data是你的 String/double/int/你想放入交叉淡入淡出小部件的任何东西。builder您可以在其中创建小部件。

它是这样使用的：

CrossFade<String>(
    initialData: 'Some String',
    data: myString,
    builder: (value) => Text(value),
),

编辑：

空安全版本，重命名为AnimatedFadeOutIn： https ://gist.github.com/cirediew/9f68acb7aed1296a232a5f846071d2c3

Answer 2

用AnimatedSwitcher小部件包裹您的文本小部件，并在 transitionBuilder 中定义您的孩子。

在子项（文本小部件）中，定义如下键：

AnimatedSwitcher(
  duration: Duration(milliseconds: 200),
  transitionBuilder:
      (Widget child, Animation<double> animation) {
    return SlideTransition(
      child: child,
      position: Tween<Offset>(
              begin: Offset(0.0, -0.5),
              end: Offset(0.0, 0.0))
          .animate(animation),
    );
  },
  child: Text(
    userAnswer,
    key: ValueKey<String>(userAnswer),
    style: TextStyle(fontSize: 45, color: Colors.white),
  ),
)

其中 userAnswer 是字符串。