Flutter V3中Navigator导致透明页面无法透出下方Scaffold颜色

备注1：该示例仅用于复现iOS真机与iOS模拟器上出现的对应问题。
备注2：该逻辑在Flutter V2版本中运行正常，升级至Flutter V3后出现异常。

• 场景说明：
  实现了常驻的BottomNavigationBar组件，为每个标签页单独包裹独立Navigator组件维护各自的页面栈，这部分基础逻辑运行正常。当前需要将各标签对应的页面设置为透明，从而透出包裹整个屏幕的父组件背景色，但实际运行时透明页面无法实现和BottomNavigationBar一致的透底效果。

• 复现验证方式：
  跳转至示例代码第156行，可在两种返回写法间切换验证效果：

  • 写法1：return _page!;
  • 写法2：return Visibility(...)

异常效果： 页面内容区域显示为不透明的黑色，无法透出下方父组件的蓝色背景，仅BottomNavigationBar区域可正常透出蓝色。
预期正常效果： 页面内容区域和BottomNavigationBar区域均可正常透出下方父组件的纯色蓝色背景。

问题原因 #

1. 层级逻辑差异：BottomNavigationBar是外层Scaffold的直接子节点，和body里放的嵌套Navigator是兄弟关系，只要它自己设了透明，就不会被其他层挡住，能直接透出最外层父组件的背景；但页面内容是嵌套Navigator的子节点，只要嵌套Navigator的路由、页面根节点任意一层带了不透明设置，就会把下层背景挡得严严实实。
2. Flutter 3渲染规则改动：Flutter 3补上了之前路由opaque属性渲染不严格的漏洞，默认的MaterialPageRoute、CupertinoPageRoute的opaque默认值都是true，会强制在路由层铺一层不透明的底色（iOS上默认是黑色）。Flutter 2里这个逻辑有bug，没严格铺这层底色，所以升级后原来能透的页面就透不出来了。
3. 组件默认背景坑：页面最常用的根组件Scaffold，默认会拿主题里的scaffoldBackgroundColor当自己的背景色，不显式设成透明的话，它自己就是个不透明的挡板，根本不可能透底。

解决方案 #

1. 嵌套Navigator里的所有路由，别直接用默认的MaterialPageRoute/CupertinoPageRoute，自己用PageRouteBuilder写路由，显式把路由标成透明：

PageRouteBuilder(
  opaque: false, // 最核心配置：告诉Flutter这个路由是透明的，别铺默认不透明底色
  barrierColor: Colors.transparent,
  pageBuilder: (context, animation, secondaryAnimation) => 你的目标页面(),
  // 转场动画可以自己按需改，这里举个淡入的例子
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return FadeTransition(opacity: animation, child: child);
  },
)

2. 所有需要透底的页面，根节点的Scaffold必须手动把背景改成透明：

Scaffold(
  backgroundColor: Colors.transparent, // 去掉Scaffold自带的不透明背景
  // 剩下的页面逻辑正常写
)

3. 底部导航的多标签切换，别用Visibility或者Offstage做显示隐藏，换成IndexedStack来维护各标签页的状态，避免组件重绘的时候重新触发路由层的不透明底色绘制逻辑。

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