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),
),

Answer 2

我遇到了同样的问题，为此我使用了 ValueListenableBuilder 。因此，当滑块更改时，我会通知我由Opacity小部件包裹的文本：

我有这个：

var textOpacity = ValueNotifier(1.0);

然后：

 Widget _getHeaderText() {
return ValueListenableBuilder(
    valueListenable: textOpacity,
    builder: (context, value, child) {
      return Opacity(
        opacity: value,
        child: Text(
          titles[_pageIndex],
        ),
      );
    });

}

在滚动侦听器中，我只是通知我的不透明度小部件值：

textOpacity.value = newOpacityValue; //for example .5

Answer 3

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

文本数据更改时出现动画动画过渡

3 个答案: