Flutter中CupertinoPageTransition第二路由过渡透明度问题咨询

Flutter自带的CupertinoPageTransition在push新路由时，会对背景的前一个路由应用从1到0.8的透明度动画，这和原生iOS的过渡行为不一致，导致观感不佳。不用重写整个CupertinoPageTransition，可以通过自定义transitionsBuilder快速修复：

核心思路 #

默认的透明度变化由secondaryRouteAnimation参数控制，只需将这个动画替换为固定值1.0，就能让背景路由保持完全不透明，同时保留原有的视差滑动效果。

具体实现 #

方式1：单次路由使用

在Navigator.push时直接指定自定义的transitionsBuilder：

Navigator.push(
  context,
  CupertinoPageRoute(
    builder: (context) => YourTargetPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return CupertinoPageTransition(
        primaryRouteAnimation: animation,
        // 固定背景透明度为1，取消默认的透明度动画
        secondaryRouteAnimation: const AlwaysStoppedAnimation(1.0),
        linearTransition: false,
        child: child,
      );
    },
  ),
);

方式2：全局复用

封装自定义路由方法，方便全局调用：

Route<T> customCupertinoPageRoute<T>({
  required WidgetBuilder builder,
  String? title,
  bool maintainState = true,
  bool fullscreenDialog = false,
}) {
  return CupertinoPageRoute<T>(
    builder: builder,
    title: title,
    maintainState: maintainState,
    fullscreenDialog: fullscreenDialog,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return CupertinoPageTransition(
        primaryRouteAnimation: animation,
        secondaryRouteAnimation: const AlwaysStoppedAnimation(1.0),
        linearTransition: false,
        child: child,
      );
    },
  );
}

使用时直接调用：

Navigator.push(
  context,
  customCupertinoPageRoute(builder: (context) => YourTargetPage()),
);

方式3：全局路由配置

如果想让所有路由都应用这个效果，在CupertinoApp或MaterialApp的onGenerateRoute中统一返回自定义路由：

CupertinoApp(
  onGenerateRoute: (settings) {
    return customCupertinoPageRoute(
      builder: (context) => _getPage(settings.name),
      title: settings.name,
    );
  },
);

// 根据路由名称返回对应页面
Widget _getPage(String? name) {
  switch (name) {
    case '/':
      return HomePage();
    case '/detail':
      return DetailPage();
    default:
      return NotFoundPage();
  }
}

原理说明 #

CupertinoPageTransition的secondaryRouteAnimation参数默认绑定了一个从1到0.8的动画，用于控制背景路由的透明度。将其替换为AlwaysStoppedAnimation(1.0)后，背景路由的透明度会一直保持1，完全匹配原生iOS的过渡视觉效果。

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