代码之家 › 专栏 › 技术社区 › Viren V Varasadiya

如何在flutter中延迟列表项?

flutter-animation flutter

1

Viren V Varasadiya · 技术社区 · 6 年前

我试着在flutr中生成一个列表,它在一段时间的延迟之后延迟了每个项目。我试过用 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();
          },
        )
    );
  }
}

1 回复 | 直到 6 年前

1

2

diegoveloper 6 年前

你可以用 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 以模拟淡入淡出动画。