如何push页面并保留前页可见？MaterialPageRoute透明背景问题解决

问题出在MaterialPageRoute本身——它默认会强制渲染一个不透明的页面容器，就算你给Scaffold设了透明背景也会被覆盖。要保留push的过渡效果同时实现透明，得自定义路由：

• 用PageRouteBuilder替代MaterialPageRoute，核心是把opaque参数设为false，这会允许路由不遮挡背后的页面。
• 如果你想保留Material风格的滑动过渡，在transitionsBuilder里实现对应的动画逻辑就行。

完整代码示例：

// 自定义透明页面组件
class TransparentPage extends StatelessWidget {
  const TransparentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text('透明页面'),
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
          color: Colors.white.withOpacity(0.9),
          child: const Text('我是透明页面的内容'),
        ),
      ),
    );
  }
}

// 跳转逻辑
Navigator.of(context).push(
  PageRouteBuilder(
    opaque: false, // 关键设置：允许背景透明
    transitionDuration: const Duration(milliseconds: 300),
    pageBuilder: (context, animation, secondaryAnimation) => const TransparentPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 实现和MaterialPageRoute一致的右侧滑入过渡效果
      var tween = Tween(begin: const Offset(1.0, 0.0), end: Offset.zero)
          .chain(CurveTween(curve: Curves.ease));
      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  ),
);

这样设置后，push出来的透明页面就能看到背后的前一页，同时保留你想要的push过渡动画。

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