Question

我在Flutter中制作动画时遇到了一些麻烦。彼此相邻有3个圆圈。当其中之一被按下时，我希望它展开和折叠。动画有效，但整个圆圈行在发生时都向下移动，以保持圆圈所在行的顶部。我如何确保该行保持其原始位置？

我只将动画应用于中心圆进行了测试。如果代码混乱，很抱歉，这是因为我正在测试。这是动画和动画控制器：

    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 200));
    _animation = Tween(begin: 0.25, end: 0.35).animate(
        CurvedAnimation(parent: _animationController, curve: Curves.elasticIn))
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _animationController.reverse();
        }
      });

这些是圈子：

Column(
        children: <Widget>[
Container(
            margin: EdgeInsets.only(top: 16.0),
            child: Center(
              child: Text(
                'Circles',
                style: TextStyle(fontSize: 18),
              ),
            ),
          ),
Container(
            margin: EdgeInsets.only(top: 8.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width * 0.25,
                  height: MediaQuery.of(context).size.height * 0.2,
                  margin: EdgeInsets.symmetric(horizontal: 8.0),
                  child: Center(child: Text('Circle')),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: AppColors.primaryBlue)),
                ),
                AnimatedBuilder(
                  animation: _animation,
                  builder: (context, child) {
                    return GestureDetector(
                      onTap: () {
                        _animationController.forward();
                      },
                      child: Container(
                        width: MediaQuery.of(context).size.width *
                            _animation.value,
                        height: MediaQuery.of(context).size.height *
                            _animation.value,
                        margin: EdgeInsets.symmetric(horizontal: 8.0),
                        child: Center(child: Text('Circle')),
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(color: AppColors.primaryBlue)),
                      ),
                    );
                  },
                ),
                Container(
                  width: MediaQuery.of(context).size.width * 0.25,
                  height: MediaQuery.of(context).size.height * 0.2,
                  margin: EdgeInsets.symmetric(horizontal: 8.0),
                  child: Center(child: Text('Circle')),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: AppColors.primaryBlue)),
                )
              ],
            ),
          ),

您可能会注意到我对Flutter中的动画还很陌生，因此也非常欢迎其他反馈。谢谢！

Answer 1

输出：

完整代码：

>>> App\User::whereDate('created_at', Carbon\Carbon::now()->subMonth()->toDateSt
ring())->get()
=> Illuminate\Database\Eloquent\Collection {#3120
     all: [
       App\User {#3114
         id: 90,
         name: "******",
         email: "******@gmail.com",
         created_at: "2019-05-01 06:17:47",
         updated_at: "2019-05-02 00:28:18",
       },
     ],
   }
>>>

Answer 2

首先，我建议您删除mainAxisSize: MainAxisSize.min,（如果该方法无效），请尝试用容器包装动画生成器，并为其赋予与它们相同的属性

颤动的动画：如何保持父窗口小部件的位置

2 个答案: