Flutter Android 如何使用iOS的页面过渡动画?

1,190 阅读1分钟

众所周知,Flutter Android的默认页面过渡动画是从底部向上打开,而iOS则右侧滑入,同时旧页面会向左侧推出。 但从底部向上打开,感觉始终有一丝丝违和感,那么如何做到和iOS统一页面过渡动画呢?

其实非常简单,刚开始进行了大量搜索,发现大多数是一些改造路由动画,或者采用CupertinoPageRoute的方法,但总感觉不对劲,毕竟Material和Cupertino混合使用并不优雅。

其实只需要在MaterialApp中的theme中定义pageTransitionsTheme方法就可以啦。

以下是默认源码示例

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(builders: {
          TargetPlatform.android: CupertinoPageTransitionsBuilder(),
          TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
        }),
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

这里单独列出,相当于指定android和ios平台使用CupertinoPageTransitionsBuilder

        pageTransitionsTheme: PageTransitionsTheme(builders: {
          TargetPlatform.android: CupertinoPageTransitionsBuilder(),
          TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
        }),

查看PageTransitionsTheme类发现,还有更多的方法 api.flutter.dev/flutter/mat…

ThemeData.pageTransitionsTheme,它定义整个主题的默认页面过渡。

FadeUpwardsPageTransitionsBuilder,它定义默认的页面过渡。

OpenUpwardsPageTransitionsBuilder,它定义了与Android P提供的页面转换类似的页面转换。

CupertinoPageTransitionsBuilder,它定义与本地iOS页面过渡匹配的水平页面过渡。

最终效果