Flutter 中如何实现多个 Widget 逐个延迟渐显的动画效果

核心原理 #

你之前直接用ListView没有效果，是因为普通ListView默认会一次性渲染所有子项，没有内置逐个出场的动画逻辑，需要给每个子项单独绑定动画触发规则，按顺序延迟启动动画即可实现目标效果。

实现方案1：轻量自定义动画（适配任意布局，不限于列表） #

• 给每个需要出场的Text、Container组件外层包裹AnimatedOpacity（控制淡入）和AnimatedContainer/AnimatedPadding（控制上滑偏移）
• 初始化时所有组件的透明度设为0、向下偏移量设为10~30px
• 页面加载完成后，按组件的排列顺序，依次间隔100_{200ms触发单个组件的状态更新：透明度改为1、偏移量改为0，动画时长统一设置为300}500ms即可达到缓慢显示的效果

实现方案2：AnimatedList实现（适配列表类场景） #

如果你的组件本身是列表结构，可以直接用Flutter官方的AnimatedList组件简化实现：

• 初始化时列表数据源设为空
• 页面加载后按顺序往数据源中逐个插入组件，每次插入间隔你需要的延迟时长
• 在AnimatedList的itemBuilder中搭配FadeTransition和SlideTransition配置入场动画，插入元素时会自动触发你配置的出场效果

核心代码参考 #

// 基于AnimatedOpacity的轻量实现示例
class EntryAnimationPage extends StatefulWidget {
  const EntryAnimationPage({super.key});

  @override
  State<EntryAnimationPage> createState() => _EntryAnimationPageState();
}

class _EntryAnimationPageState extends State<EntryAnimationPage> {
  // 你的自定义组件列表
  final List<Widget> _contentList = [
    const Text("第一条内容", style: TextStyle(fontSize: 16)),
    Container(height: 80, color: Colors.blue[100], margin: const EdgeInsets.symmetric(vertical: 10)),
    const Text("第二条内容", style: TextStyle(fontSize: 16)),
    Container(height: 80, color: Colors.green[100], margin: const EdgeInsets.symmetric(vertical: 10)),
    const Text("第三条内容", style: TextStyle(fontSize: 16)),
  ];

  final List<double> _opacityList = [];
  final List<double> _offsetYList = [];
  final int _delayInterval = 150; // 两个组件出场的间隔时长
  final int _animDuration = 400; // 单个组件动画时长

  @override
  void initState() {
    super.initState();
    // 初始化动画状态
    for (int i = 0; i < _contentList.length; i++) {
      _opacityList.add(0);
      _offsetYList.add(20);
    }
    _startAnimation();
  }

  void _startAnimation() async {
    for (int i = 0; i < _contentList.length; i++) {
      await Future.delayed(Duration(milliseconds: _delayInterval));
      setState(() {
        _opacityList[i] = 1;
        _offsetYList[i] = 0;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: List.generate(_contentList.length, (index) {
          return AnimatedOpacity(
            opacity: _opacityList[index],
            duration: Duration(milliseconds: _animDuration),
            curve: Curves.easeOut,
            child: AnimatedPadding(
              padding: EdgeInsets.only(top: _offsetYList[index]),
              duration: Duration(milliseconds: _animDuration),
              curve: Curves.easeOut,
              child: _contentList[index],
            ),
          );
        }),
      ),
    );
  }
}

调优提示 #

• 可以调整_delayInterval和_animDuration的数值适配你想要的动画速度，间隔越小整体出场越快
• 动画曲线推荐使用Curves.easeOut系列，出场效果更自然
• 如果不需要上滑效果，直接去掉AnimatedPadding相关逻辑即可，只保留透明度动画就可以实现单纯的逐个淡入效果

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