Флаттер, как заставить контейнер исчезнуть через некоторое время? - PullRequest
Новая
       36

Флаттер, как заставить контейнер исчезнуть через некоторое время?

0 голосов
/ 24 января 2020

Итак, я написал этот код, который позволяет воспроизводить анимацию там, где я нажал. Так, если я нажимаю на экран, там воспроизводится короткая анимация, где я нажимаю, если вы нажимаете несколько раз, на экране появляется несколько анимаций в течение короткого периода времени. Каждый раз, когда я нажимаю на экран, появляется место, где воспроизводится анимация, но этот контейнер продолжает занимать место, даже когда анимация не воспроизводится. Так что, если я нажму на экране, где уже есть контейнер, анимация не будет воспроизводиться. Как заставить контейнер исчезнуть через некоторое время, чтобы я мог нажимать на экране столько раз, сколько мне нужно, и при этом воспроизводиться анимация?

Это весь код, отвечающий за эту анимацию: 

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



  }

1 Ответ

1 голос
/ 25 января 2020

Вместо использования for для l oop и построения виджета для смещения в 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
      ),
    );
  }
}
...