Question

我有一个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(); } }, ),的项目会延迟显示一个接一个。

有可能吗？

.login-container{
   height: auto;
   max-height: 450px;
}

Answer 1

在列表视图小部件内而不是：

 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
                  ),),
              ),
            );

您可以这样做：

return Future.delayed(const Duration(milliseconds: 500), () =>  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
                  ),),
              ),
            );
);

Answer 2

设置默认延迟。
如果以前的项目尚未出现，请考虑如何计算项目的延迟。
使用不透明度小部件。

我已经举了一个简单的例子，说明了如何做到这一点。

将'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)),
      ),
    );
  }
}

颤动-如何使ListView延迟，因此项一一显示

2 个答案: