我有一个 ListView，其中包含通过 StreamBuilder 生成的动态项目。目前，这些项目像普通的 ListView 一样同时显示。但是，我想让 ListView 的项目一个一个地延迟显示。

有可能吗？

StreamBuilder(
  stream: greetingBloc.list,
  builder: (BuildContext context,AsyncSnapshot<List<Greeting>> snapshot){
    if(snapshot.hasData){
      return ListView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemCount: snapshot.data.length,
          itemBuilder: (ctx,i){
            return Padding(
              padding: EdgeInsets.all(8),
              child: Container(
                padding: EdgeInsets.all(16),
                color: Colors.green,
                child: Text(snapshot.data[i].description,
                  style: TextStyle(
                      color: Colors.white
                  ),),
              ),
            );
          },
        );
    }else{
      return GreetingShimmer();
    }  
  },
),

最佳答案

1. 设置默认延迟。
2. 想想如果上一个项目还没有出现，如何计算一个项目的延迟。
3. 使用不透明度小部件。

我已经做了一个简单的例子，你可以怎么做。

将'dart:math'导入为数学； 导入 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Test(),
      ),
    );
  }
}

class Test extends StatelessWidget {
  DateTime lastRender;

  get _duration {
    var now = DateTime.now();
    var defaultDelay = Duration(milliseconds: 100);
    Duration delay;

    if (lastRender == null) {
      lastRender = now;
      delay = defaultDelay;
    } else {

      var difference = now.difference(lastRender);
      if (difference > defaultDelay) {
        lastRender = now;
        delay = defaultDelay;
      } else {
        var durationOffcet = difference - defaultDelay;
        delay = defaultDelay + (-durationOffcet);

        lastRender = now.add(-durationOffcet);
      }
      return delay;
    }

    return defaultDelay;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: List.generate(
        100,
        (index) => Item('item $index', _duration),
      ),
    );
  }
}

class Item extends StatefulWidget {
  const Item(this.text, this.duration);

  final Duration duration;
  final String text;

  @override
  _ItemState createState() => _ItemState();
}

class _ItemState extends State<Item> with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController animationController;

  bool visible = false;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      duration: widget.duration,
      vsync: this,
    );

    animation = Tween(begin: 0.0, end: 1.0).animate(animationController);
    animation.addStatusListener((status) {
      setState(() {});
    });
    animationController.forward();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: animation.value,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
            width: 4,
            color: Colors.blueAccent,
          ),
        ),
        height: 80,
        child: Text(widget.text, style: TextStyle(fontSize: 20.0)),
      ),
    );
  }
}

关于android - flutter - 如何延迟到ListView，所以项目一个一个显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57621275/