Flutter中实现平滑过渡动画并保持按钮位置稳定

问题核心原因 #

按钮位置跳转是因为切换的容器高度变化时，父布局会立即重排，按钮的位置依赖于容器的底部边界，导致按钮跟着容器高度变化而移位。要解决这个问题，需要将按钮固定在独立的布局区域，同时让容器的高度变化通过动画平滑过渡，避免布局突然重排。

实现方案 #

以下两种方案都能适配「容器高度可变」的实际场景，同时保证按钮位置稳定：

方案1：用Stack固定按钮位置

将按钮放在Stack的底部固定位置，切换容器占满剩余空间，通过AnimatedSize处理容器高度的平滑变化：

class StableToggleSwitch extends StatefulWidget {
  @override
  _StableToggleSwitchState createState() => _StableToggleSwitchState();
}

class _StableToggleSwitchState extends State<StableToggleSwitch> {
  bool _isContainer1Active = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 切换容器区域：占满除按钮外的全部空间
          Positioned.fill(
            bottom: 80, // 为底部按钮预留空间
            child: AnimatedSize(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 300),
                // 自定义过渡动画：淡入淡出+旋转
                transitionBuilder: (child, animation) {
                  return FadeTransition(
                    opacity: animation,
                    child: RotationTransition(
                      turns: Tween(begin: 0.05, end: 1.0).animate(animation),
                      child: child,
                    ),
                  );
                },
                child: _isContainer1Active
                    ? Container(
                        key: const ValueKey('tall_container'),
                        color: Colors.lightBlueAccent,
                        child: const Center(child: Text('高内容容器')),
                      )
                    : Container(
                        key: const ValueKey('short_container'),
                        color: Colors.orangeAccent,
                        child: const Center(child: Text('矮内容容器')),
                      ),
              ),
            ),
          ),
          // 固定在底部的切换按钮
          Positioned(
            bottom: 20,
            left: 0,
            right: 0,
            child: Center(
              child: ElevatedButton(
                onPressed: () => setState(() => _isContainer1Active = !_isContainer1Active),
                child: Text(_isContainer1Active ? '切换到矮容器' : '切换到高容器'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

方案2：用Column+Expanded固定按钮位置

将按钮放在Column的末尾，切换容器用Expanded包裹，配合AnimatedSize实现高度平滑过渡：

class StableToggleSwitch extends StatefulWidget {
  @override
  _StableToggleSwitchState createState() => _StableToggleSwitchState();
}

class _StableToggleSwitchState extends State<StableToggleSwitch> {
  bool _isContainer1Active = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 切换容器区域：自动填充剩余空间
          Expanded(
            child: AnimatedSize(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 300),
                // 自定义过渡动画：淡入淡出+缩放
                transitionBuilder: (child, animation) {
                  return FadeTransition(
                    opacity: animation,
                    child: ScaleTransition(
                      scale: animation,
                      child: child,
                    ),
                  );
                },
                child: _isContainer1Active
                    ? Container(
                        key: const ValueKey('dynamic_tall'),
                        color: Colors.lightBlueAccent,
                        child: const Center(child: Text('动态高度容器（内容多）')),
                      )
                    : Container(
                        key: const ValueKey('dynamic_short'),
                        color: Colors.orangeAccent,
                        child: const Center(child: Text('动态高度容器（内容少）')),
                      ),
              ),
            ),
          ),
          // 按钮固定在Column底部，不受容器高度影响
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 20),
            child: ElevatedButton(
              onPressed: () => setState(() => _isContainer1Active = !_isContainer1Active),
              child: Text(_isContainer1Active ? '切到短容器' : '切到长容器'),
            ),
          ),
        ],
      ),
    );
  }
}

关键注意点 #

1. AnimatedSize的作用：自动计算容器的动态高度，并生成平滑的高度过渡动画，避免布局突然重排。
2. 布局分离原则：按钮的位置不依赖于切换容器的底部边界，而是通过Stack的Positioned或Column的固定位置来锚定，确保容器高度变化时按钮位置稳定。
3. 自定义过渡动画：通过AnimatedSwitcher的transitionBuilder可以实现任意过渡效果（淡入淡出、旋转、缩放等），完全不影响布局稳定性。

内容的提问来源于stack exchange，提问作者Benjamin Sx