如何在flutter中的Listview.builder()上的Item和Item之间给出延迟？

Question

import 'package:calendar_app/constants/customColor.dart';
import 'package:calendar_app/models/announcement.dart';
import 'package:calendar_app/services/getAnnouncement.dart';
import 'package:calendar_app/widgets/announcementItem.dart';
import 'package:flutter/material.dart';

class Announcement extends StatefulWidget {
  const Announcement({Key? key}) : super(key: key);

  @override
  State<Announcement> createState() => _AnnouncementState();
}

class _AnnouncementState extends State<Announcement>
    with SingleTickerProviderStateMixin {
  Future<List<AnnouncementItem>> announcements = getAnnouncement();

  late final AnimationController _controller = AnimationController(
    duration: const Duration(milliseconds: 1000),
    vsync: this,
  )..forward();

  late final Animation<double> _fadeAnimation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  );

  late final Animation<Offset> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.elasticOut,
  ).drive(Tween(begin: const Offset(0.0, 0.4), end: Offset.zero));
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: CustomColor.pastelBlue,
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
        child: FutureBuilder<List<AnnouncementItem>>(
          future: announcements,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text('Error: ${snapshot.error}'),
              );
            } else if (snapshot.hasData) {
              final announcements = snapshot.data!;
              return Expanded(
                child: ListView.builder(
                  itemCount: announcements.length,
                  itemBuilder: (context, index) {
                    return FadeTransition(
                      opacity: _fadeAnimation,
                      child: SlideTransition(
                        position: _animation,
                        child: AnnouncementListItem(
                          announcement: snapshot.data![index],
                        ),
                      ),
                    );
                  },
                ),
              );
            } else {
              return const Center(
                child: Text('No announcements found.'),
              );
            }
          },
        ),
      ),
    );
  }

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

1. 调用 getAnnouncement();
2. 分配控制器和动画
3. FutureBuilder 的加载指示器
4. 如果有snapData则返回Listview.builder()
5. 由 FadeTransition 和 SlideTransition 包裹的AnnouncementListItem

我找到了这个包，但我只是想自己实现

我想在每个项目上应用每个过渡效果。但它不允许我...

我想实现像这样的包效果 https://pub.dev/packages/flutter_staggered_animations

Answer 1

您可以：

1. 查看 flutter_staggered_animation 的 github 代码，看看包创建者是如何解决这个问题的。然而，由于它是一个包，并且包含几个不同的动画，对于您想要实现的目标来说可能有点太复杂了。

2. 使用AnimatedList代替ListView。这是 flutter 的列表视图类，需要为其列表项提供动画。看一下这个问题，了解如何添加延迟