众所周知,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页面过渡匹配的水平页面过渡。
最终效果