顫動動畫：如何保持父窗口小部件的位置

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

輸出：

完整代碼：

Column(
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(top: 16.0),
      child: Center(
        child: Text(
          'Circles',
          style: TextStyle(fontSize: 18),
        ),
      ),
    ),
    Container(
      height: 200,
      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)),
          ),
          Spacer(),
          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)),
                ),
              );
            },
          ),
          Spacer(),
          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)),
          )
        ],
      ),
    ),
  ],
);

Answer 2

首先，我建議您刪除mainAxisSize: MainAxisSize.min,如果這不起作用，請嘗試用容器包裝動畫生成器，並為其提供與那些相同的屬性