Flutter实现带垂直展开动画的自定义Scaffold组件技术问询

1. 替换动画组件实现垂直展开 #

你原来用的ScaleTransition会同时缩放水平和垂直方向，要实现仅垂直方向从中心向上下展开，直接用SizeTransition更合适，设置axis为垂直方向并指定axisAlignment: 0.5即可实现中心展开的效果：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const ChooserWidget(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.easeInOut,
        reverseCurve: Curves.easeInOut, // 关闭页面时保持一致的缓动曲线
      );

      return SizeTransition(
        axis: Axis.vertical,
        axisAlignment: 0.5, // 控制动画从中心向上下两端扩展
        sizeFactor: curvedAnimation,
        child: child,
      );
    },
  ),
);

2. 添加动画过程中的动态边框 #

要在动画执行时显示边框、结束后隐藏，可以通过AnimatedBuilder监听动画状态，动态控制容器的边框样式：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const ChooserWidget(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.easeInOut,
        reverseCurve: Curves.easeInOut,
      );

      return AnimatedBuilder(
        animation: curvedAnimation,
        builder: (context, child) {
          // 动画未完成（正向执行）或处于反向状态（关闭页面）时显示边框
          final showBorder = curvedAnimation.status != AnimationStatus.completed || 
                             curvedAnimation.status == AnimationStatus.reverse;

          return Container(
            decoration: showBorder 
                ? BoxDecoration(
                    border: Border.all(color: Colors.black, width: 2), // 自定义边框颜色和宽度
                    borderRadius: BorderRadius.zero, // 可选：设置圆角
                  ) 
                : null,
            child: SizeTransition(
              axis: Axis.vertical,
              axisAlignment: 0.5,
              sizeFactor: curvedAnimation,
              child: child,
            ),
          );
        },
        child: child,
      );
    },
  ),
);

关键说明 #

• SizeTransition的axisAlignment: 0.5是核心：它让垂直方向的动画从中心向上下两端同时扩展，完全匹配你要的GameBoy菜单效果。
• 边框控制逻辑：通过动画状态判断，确保页面展开完成后边框自动隐藏，关闭页面时边框重新显示直到动画结束。
• 如果你需要更精细的控制（比如根据动画进度显示边框，而非状态），可以用curvedAnimation.value < 1.0替代状态判断，效果一致。

内容的提问来源于stack exchange，提问作者e-info128