如何在Flutter中为列表随机抽取的字符串添加淡入淡出动画效果

推荐优先使用AnimatedSwitcher方案，改造成本更低，无需额外维护透明度状态，适配组件切换场景更自然。

方案1：使用AnimatedSwitcher实现（推荐） #

无需修改原有定时器、随机抽取逻辑，仅需调整testFieldText方法代码即可：

Widget testFieldText() {
  return AnimatedSwitcher(
    // 自定义淡入淡出动画时长
    duration: const Duration(milliseconds: 500),
    transitionBuilder: (child, animation) => FadeTransition(
      opacity: animation,
      child: child,
    ),
    child: Text(
      _current,
      // 必须设置唯一key，用于AnimatedSwitcher判断是否需要触发切换动画
      key: ValueKey(_current),
      style: TextStyle(color: Colors.primaries[Random().nextInt(Colors.primaries.length)]),
    ),
  );
}

方案2：使用AnimatedOpacity实现 #

如果需要手动控制透明度进度，可按以下步骤修改：

1. 新增透明度状态变量

double _opacity = 1.0;

2. 修改_shuffle方法，适配动画时序

void _shuffle() async {
  if (numberList.isNotEmpty) {
    // 触发淡出动画
    setState(() => _opacity = 0.0);
    // 等待淡出动画完成，时长与AnimatedOpacity配置的duration保持一致
    await Future.delayed(const Duration(milliseconds: 500));
    // 替换当前展示文本
    numberList.shuffle();
    String item = numberList.removeLast();
    setState(() => _current = item);
    // 触发淡入动画
    setState(() => _opacity = 1.0);
  } else {
    // 列表抽取完毕后自动销毁定时器，避免内存泄漏
    timer?.cancel();
  }
}

3. 修改testFieldText方法，包裹AnimatedOpacity组件

Widget testFieldText() {
  return AnimatedOpacity(
    opacity: _opacity,
    duration: const Duration(milliseconds: 500),
    child: Text(
      _current,
      style: TextStyle(color: Colors.primaries[Random().nextInt(Colors.primaries.length)]),
    ),
  );
}

额外注意事项 #

务必在页面销毁时取消定时器，避免内存泄漏：

@override
void dispose() {
  timer?.cancel();
  super.dispose();
}

内容的提问来源于stack exchange，提问作者Kuroiteiken