Flutter，如何让容器在一段时间后消失？答案

【问题标题】：Flutter, How to make a container disappear after som time?Flutter，如何让容器在一段时间后消失？
【发布时间】：2020-01-24 20:32:26
【问题描述】：

所以我编写了这段代码，它可以让动画在我按下的地方播放。因此，如果我按下屏幕，则会在我按下的位置播放一个简短的动画，如果您多次按下，屏幕上会在短时间内播放多个动画。每次我按下屏幕时，都会有一个容器占据播放动画的位置，但即使没有播放动画，这个容器也会不断占用空间。因此，如果我在已经有容器的屏幕上按下，则不会播放动画。如何让容器在一段时间后消失，以便我可以在屏幕上按我想要的多次，并且仍然可以播放动画？

这是负责该动画的所有代码：

class HomePage extends StatefulWidget{
@override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> 


 with SingleTickerProviderStateMixin {
  final tappedPositions = <Offset>[];

  AnimationController _animationController;


  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );

    super.initState();
  }


          new GestureDetector(
            onTapUp: (tabDetails) {
              setState(() {
                tappedPositions.add(tabDetails.localPosition);
              });
            },
            child: Container(
              color: Colors.transparent,
            ),
          ),
          for (final position in tappedPositions)
            Positioned(
              top: position.dy,
              left: position.dx,
              child: MyAnimatedWidget(
                animation: _animationController,
              ),
            ),
        ],

    );
  }
}
  class MyAnimatedWidget extends StatelessWidget {
  final Animation animation;

  const MyAnimatedWidget({Key key, this.animation}) : super(key: key);

 @override
  Widget build(BuildContext context) {
     return AnimatedBuilder(
      animation: animation,
      child: Container(
        height: 80.0,
        width: 80.0,
        child: new FlareActor(
         "assets/images/tryckplats.flr",
         animation: "tryck",
      ),
      ),

      builder: (context, child) {
        return Transform(
          alignment: Alignment.center,


          child: child,
        );
      },
    );
  }



  }

【问题讨论】：

标签： flutter containers flare

【解决方案1】：

不要使用 for 循环并在tappedPositions 中为每个偏移量构建一个小部件，而是使用一个函数将具有偏移量的新小部件插入到状态列表中，然后将子列表映射到堆栈中。现在点击的动画可以在另一个上播放，并且可以在计时器到期后从列表中按键删除。

class _HomePageState extends State<HomePage> 


 with SingleTickerProviderStateMixin {
  final _animatedBoxes = <Widget>[];

  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );

    super.initState();
  }

  Widget _buildAnimatedBox(Offset position) {
    setState({
      animatedBoxes.add(
        Positioned(
          key: Key(animatedBoxes.length)
          top: position.dy,
          left: position.dx,
          child: MyAnimatedWidget(
          animation: _animationController,
        ),
       }
     );
   }


  Widget build(BuildContext context)
    return GestureDetector(
      onTapUp: (tabDetails) => _buildAnimatedBox(tabDetails)
      child: Stack(
        children: _animatedBoxes
      ),
    );
  }
}

【讨论】：