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

Question

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

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

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

Answer 1

使用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 是字符串。

Answer 2

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

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

initialData第一次需要显示。 data是您的字符串/双精度/整数/任何您想放入淡入淡出小部件的内容。而builder在其中，你可以创建你的widget。

它是这样使用的：

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