Flutter实现类似LinearLayout animateLayoutChanges的平滑布局动画

嘿，作为Flutter新手想要实现类似Android里LinearLayout设置animateLayoutChanges=true的平滑布局动画？完全没问题，我给你两个简单好上手的方案，都是直接能套用到表单里的～

AnimatedContainer是Flutter里最常用的动画容器之一，它能自动对自身的尺寸、padding、颜色等属性变化添加过渡动画。对于表单场景，我们可以用它包裹整个表单区域，当隐藏/显示组件时，让容器的尺寸平滑调整，带动内部组件自然移动。

示例代码：

class SmoothFormAnimation extends StatefulWidget {
  @override
  _SmoothFormAnimationState createState() => _SmoothFormAnimationState();
}

class _SmoothFormAnimationState extends State<SmoothFormAnimation> {
  // 控制是否显示额外字段
  bool _showExtraField = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('平滑表单动画示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        // 用AnimatedContainer包裹表单内容
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 300), // 动画时长
          curve: Curves.easeInOut, // 动画曲线，让过渡更自然
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextField(decoration: const InputDecoration(labelText: '用户名')),
              const SizedBox(height: 16),
              TextField(decoration: const InputDecoration(labelText: '密码')),
              const SizedBox(height: 16),
              // 根据状态显示/隐藏额外字段
              if (_showExtraField) ...[
                TextField(decoration: const InputDecoration(labelText: '手机号码')),
                const SizedBox(height: 16),
              ],
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _showExtraField = !_showExtraField;
                  });
                },
                child: Text(_showExtraField ? '隐藏手机号' : '添加手机号'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如果你的需求只是处理尺寸变化的动画，AnimatedSize会更聚焦——它专门用来监听子组件的尺寸变化，并自动生成过渡动画，不需要手动设置容器高度，用起来更省心。

示例代码：

class AnimatedSizeForm extends StatefulWidget {
  @override
  _AnimatedSizeFormState createState() => _AnimatedSizeFormState();
}

class _AnimatedSizeFormState extends State<AnimatedSizeForm> {
  bool _showExtraField = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedSize表单动画')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: AnimatedSize(
          duration: const Duration(milliseconds: 300),
          curve: Curves.fastOutSlowIn, // 这个曲线更贴近Android默认动画感
          clipBehavior: Clip.hardEdge, // 防止动画过程中内容溢出
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min, // 关键：让Column自适应内容高度
            children: [
              TextField(decoration: const InputDecoration(labelText: '邮箱')),
              const SizedBox(height: 16),
              TextField(decoration: const InputDecoration(labelText: '验证码')),
              const SizedBox(height: 16),
              if (_showExtraField) ...[
                TextField(decoration: const InputDecoration(labelText: '验证码说明')),
                const SizedBox(height: 16),
              ],
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _showExtraField = !_showExtraField;
                  });
                },
                child: Text(_showExtraField ? '收起说明' : '查看说明'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• 记得把Visibility（如果用的话）的maintainSize设为false，不然组件隐藏后还会占位置，动画效果就不明显了；
• 调整curve参数可以改变动画的节奏，比如Curves.ease是默认的平缓曲线，Curves.bounceOut会带点弹性效果；
• 如果想给单个隐藏的组件加渐入渐出效果，可以配合AnimatedOpacity一起使用，但核心的布局过渡还是靠上面两个容器组件。

内容的提问来源于stack exchange，提问作者Bikram gurung