flutter - 如何延迟 flutter 中的列表项？

Question

我正在尝试在 flutter 中生成一个列表，它会在延迟一段时间后延迟每个项目。我试过使用 FutureBuilder 和 AnimatedList 但我没有得到它。

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => new _ExampleState();
}

class _ExampleState extends State<Example> with TickerProviderStateMixin{
  AnimationController listViewController;
  final Animation listView;
  Duration duration = new Duration(seconds: 3);
  Timer _timer;

  @override
  void initState() {
    listViewController = new AnimationController(
        duration: new Duration(seconds: 2),
        vsync: this
    );
    super.initState();
  }

  FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;
  item() {
    _timer = new Timer(const Duration(seconds: 1), () {
      return Text("cdscs");
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("hello"),
        ),
        // ListView Builder
        body: AnimatedList(
          initialItemCount: 10,
          itemBuilder: (BuildContext context,
              int index,
              Animation<double> animation){
            return item();
          },
        )
    );
  }
}

Answer 1

您可以为每个 child 使用 AnimationController 和 Animation，就像这个例子:

    class Example extends StatefulWidget {
      @override
      _ExampleState createState() => new _ExampleState();
    }

    class _ExampleState extends State<Example> with TickerProviderStateMixin {

    AnimationController _animationController;
    double animationDuration = 0.0;
    int totalItems = 10;

      @override
      void initState() {
          super.initState();
          final int totalDuration = 4000;
        _animationController = AnimationController(
            vsync: this, duration: new Duration(milliseconds: totalDuration));
            animationDuration = totalDuration/(100*(totalDuration/totalItems));
         _animationController.forward();
      }

      FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;

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

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text("hello"),
            ),
            // ListView Builder
            body: ListView.builder(
              itemCount: totalItems,
              itemBuilder: (BuildContext context, int index) {
                return new Item(index: index, animationController: _animationController, duration: animationDuration);
              },
            ));
      }
    }

    class Item extends StatefulWidget {

    final int index;
    final AnimationController animationController;
    final double duration;

    Item({this.index, this.animationController, this.duration});

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

    class _ItemState extends State<Item> {
      Animation _animation;
      double start;
      double end;

      @override
      void initState() {
        super.initState();
        start = (widget.duration * widget.index ).toDouble();
        end = start + widget.duration;
        print("START $start , end $end");
        _animation = Tween<double>(
          begin: 0.0,
          end: 1.0,
        ).animate(
          CurvedAnimation(
            parent: widget.animationController,
            curve: Interval(
              start,
              end,
              curve: Curves.easeIn,
            ),
          ),
        )..addListener((){
          setState(() {
                });
        });
      }


     @override
      Widget build(BuildContext context) {
        return Opacity(
          opacity: _animation.value,
              child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: new Text("New Sample Item ${widget.index}"),
          ),
        );
      }
    }

您可以更改动画，在本例中我使用 opacity 来模拟淡入淡出动画。