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)),
                )
              ],
            ),
          ),

列(
儿童：[
容器(
边距：仅限边缘集（顶部：16.0），
儿童：中心(
子：文本(
"圈",，
样式：TextStyle（字体大小：18），
),
),
),
容器(
页边距：仅限边缘集（顶部：8.0），
孩子：排(
mainAxisSize:mainAxisSize.min，
儿童：[
容器(
宽度：MediaQuery.of（context）.size.width*0.25，
高度：MediaQuery.of（context）.size.height*0.2，
边缘：边缘组。对称（水平：8.0），
子对象：中心（子对象：文本（‘圆’），
装饰：盒子装饰(
形状：BoxShape.circle，
边框：border.all（颜色：AppColors.primaryBlue）），
),
动画生成器(
动画：_动画，
生成器：（上下文，子对象）{
返回手势检测器(
onTap:（）{
_animationController.forward（）；
},
子：容器(
宽度：MediaQuery.of（上下文）.size.width*
_动画。价值，
高度：MediaQuery.of（上下文）.size.height*
_动画。价值，
边缘：边缘组。对称（水平：8.0），
子对象：中心（子对象：文本（‘圆’），
装饰：盒子装饰(
形状：BoxShape.circle，
边框：border.all（颜色：AppColors.primaryBlue）），
),
);
},
),
容器(
宽度：MediaQuery.of（context）.size.width*0.25，
高度：MediaQuery.of（context）.size.height*0.2，
边缘：边缘组。对称（水平：8.0），
子对象：中心（子对象：文本（‘圆’），
装饰：盒子装饰(
形状：BoxShape.circle，
边框：border.all（颜色：AppColors.primaryBlue）），
)
],
),
),

---

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

首先，我建议您删除

mainAxisSize:mainAxisSize.min，

如果这不起作用，请尝试用容器包装动画生成器，并赋予它与那些输出相同的属性：

完整代码：

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

列(
儿童：[
容器(
边距：仅限边缘集（顶部：16.0），
儿童：中心(
子：文本(
"圈",，
样式：TextStyle（字体大小：18），
),
),
),
容器(
身高：200，
页边距：仅限边缘集（顶部：8.0），
孩子：排(
mainAxisSize:mainAxisSize.min，
儿童：[
容器(
宽度：MediaQuery.of（context）.size.width*0.25，
高度：MediaQuery.of（context）.size.height*0.2，
边缘：边缘组。对称（水平：8.0），
子对象：中心（子对象：文本（‘圆’），
装饰：框装饰（形状：BoxShape.circle，边框：border.all（颜色：AppColors.primaryBlue）），
),
垫片（），
动画生成器(
动画：_动画，
生成器：（上下文，子对象）{
返回手势检测器(
onTap:（）{
_animationController.forward（）；
},
子：容器(
宽度：MediaQuery.of（context）.size.width*\u animation.value，
高度：MediaQuery.of（context）.size.height*\u animation.value，
边缘：边缘组。对称（水平：8.0），
子对象：中心（子对象：文本（‘圆’），
装饰：框装饰（形状：BoxShape.circle，边框：border.all（颜色：AppColors.primaryBlue）），
),
);
},
),
垫片（），
容器(
宽度：MediaQuery.of（context）.size.width*0.25，
高度：MediaQuery.of（context）.size.height*0.2，
边缘：边缘组。对称（水平：8.0），
子对象：中心（子对象：文本（‘圆’），
装饰：框装饰（形状：BoxShape.circle，边框：border.all（颜色：AppColors.primaryBlue）），
)
],
),
),
],
);