0

我试图在我的项目中加入动画,其中会有一堆蓝色容器和黄色容器,当点击屏幕时,上面的容器会向下滑动,再次点击时会向上滑动(上面的容器是黄色的),非常像背景脚手架

代码

 AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController=AnimationController(
      duration: Duration(milliseconds: 250),
      vsync: this
    )..repeat();
  }

  void toggle()=>_animationController.isDismissed? _animationController.forward()
      :_animationController.reverse();


  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        toggle();
      },
      child: AnimatedBuilder(
       animation: _animationController,
       builder: (_,__){
         double slide=1.0-_animationController.value*0.3;
         double align=(MediaQuery. of(context). size. height-150.0
         )*_animationController.value;


         return Stack(
           children: <Widget>[
             Container(
               color: Colors.blue,
             ),
             Transform(
               transform: Matrix4.identity()
                 //..scale(slide)
                 ..translate(0.0,align),
               alignment: Alignment.bottomCenter ,
              
               child: Container(
                 width: double.infinity,
                 height: double.infinity,

                 decoration: BoxDecoration(
                     color: Colors.yellow,
                   borderRadius: BorderRadius.circular(12.0)
                 ),
               ),
             )
           ],
         );
       },
      ),
    );

@override
  void dispose() {
    // TODO: implement dispose
    _animationController.dispose();
    super.dispose();
  }

现在,每当我重新启动应用程序或打开应用程序时,黄色容器只会上下上下而没有任何点击,它只会在点击后停止

4

1 回答 1

1

根据文档:.repeat方法 Starts running the animation in the forward direction, and restarts the animation when it completes.

要解决此问题,请删除..repeat附加到animationControlller对象的方法。我添加了一个演示代码,说明它应该是怎样的:

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController =
        AnimationController(duration: Duration(milliseconds: 250), vsync: this);
  }
      
于 2020-07-28T09:25:19.943 回答