Flutter中如何实现ListView条目连续动态自动出现的效果

实现思路 #

要实现列表条目逐次入场的效果，核心是给每个条目分配和下标绑定的动画启动延时：下标越大的条目等待启动动画的时间越长，最终自然形成逐个出现的视觉效果。通常搭配透明度渐变+垂直平移的组合动画，就能匹配你提到的演示效果。

完整可运行原生实现代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('列表逐行入场动画')),
        body: const AnimatedListItem(),
      ),
    );
  }
}

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

  @override
  State<AnimatedListItem> createState() => _AnimatedListItemState();
}

class _AnimatedListItemState extends State<AnimatedListItem> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  // 可自行修改列表条目总数
  final int _itemCount = 20;

  @override
  void initState() {
    super.initState();
    // 单个条目动画时长设置为400毫秒，可自行调整
    _controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 400));
    // 页面加载完成后自动启动动画
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _controller.forward();
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _itemCount,
      itemBuilder: (context, index) {
        // 每个条目延时=下标*100毫秒，可调整这个数值修改条目出场间隔
        final delay = Duration(milliseconds: 100 * index);
        // 计算当前条目对应的动画区间
        final start = delay.inMilliseconds / _controller.duration!.inMilliseconds;
        final end = start + 1.0;
        // 避免动画区间超出有效范围
        final animation = Tween<double>(begin: 0, end: 1).animate(
          CurvedAnimation(
            parent: _controller,
            curve: Interval(start.clamp(0.0, 1.0), end.clamp(0.0, 1.0), curve: Curves.easeOut),
          ),
        );

        return FadeTransition(
          opacity: animation,
          child: SlideTransition(
            position: Tween<Offset>(begin: const Offset(0, 0.5), end: Offset.zero).animate(animation),
            // 这里替换成你自己的列表条目布局即可
            child: ListTile(
              title: Text('列表条目 $index'),
              subtitle: const Text('这是条目描述内容'),
              leading: const Icon(Icons.label),
            ),
          ),
        );
      },
    );
  }
}

常用参数调整 #

• 条目出场间隔：修改100 * index中的100数值，数值越大，两个条目入场的间隔越长
• 单条目动画速度：修改AnimationController的duration参数，数值越小动画越快
• 入场方向：修改Tween<Offset>的begin参数，比如设置为Offset(-0.5, 0)就是从左侧滑入，Offset(0, -0.5)就是从上方滑入
• 动画效果：修改CurvedAnimation的curve参数，可选Curves.easeIn、Curves.bounceOut等不同动效

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