Flutter如何实现文本从左到右移动消失后再从屏幕左侧重新入场的效果

借助Flutter原生动画体系即可实现，无需引入第三方依赖：用AnimationController控制动画进度，配合SlideTransition实现文本的位移动画，监听动画完成状态实现循环入场效果。

• 首先在StatefulWidget的State类中混入SingleTickerProviderStateMixin，为动画控制器提供Ticker支持
• 初始化动画控制器和位移动画对象，偏移范围设置为从屏幕左侧外到屏幕右侧外
• 给动画控制器添加状态监听，当文本完全移出右侧屏幕时，立刻重置控制器并重新启动动画，即可实现重复入场效果
• 在build方法中用SlideTransition包裹目标Text组件即可

import 'package:flutter/material.dart';

class LoopScrollText extends StatefulWidget {
  const LoopScrollText({super.key});

  @override
  State<LoopScrollText> createState() => _LoopScrollTextState();
}

class _LoopScrollTextState extends State<LoopScrollText> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<Offset> _slideAnimate;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，可自行调整duration参数修改动画速度
    _animationController = AnimationController(vsync: this, duration: const Duration(seconds: 3));
    // 定义位移动画：从屏幕左侧外（Offset(-1,0)）移动到屏幕右侧外（Offset(1,0)）
    _slideAnimate = Tween<Offset>(begin: const Offset(-1, 0), end: const Offset(1, 0)).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.linear)
    );
    // 监听动画完成状态，自动循环播放
    _animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reset();
        _animationController.forward();
      }
    });
    // 启动动画
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SlideTransition(
          position: _slideAnimate,
          child: const Text("测试滚动文本", style: TextStyle(fontSize: 22)),
        ),
      ),
    );
  }
}

• 要修改动画速度，直接调整AnimationController的duration参数即可，数值越小动画越快
• 要修改运动效果，替换CurvedAnimation的curve参数即可，比如用Curves.easeInOut实现先加速后减速的效果
• 不需要循环播放的话，删除控制器的状态监听逻辑即可

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