flutter如何实现页面切换动画
本文是Flutter动画系列的第六篇，建议读者阅读前面的教程，做到无缝衔接。
应用里有时需要从页面 A 跳转到页面 B ，本文介绍 flutter 如何实现页面切换动画。
1. PageRouteBuilder
flutter 中，从一个页面跳转到另外一个页面一般使用Navigator.push和Navigator.pop实现。push方法接受Route类型的参数，为了实现动画需要使用PageRouteBuilder。
PageRouteBuilder构造函数的参数比较多，本文用到的有：
- pageBuilder：用来构造页面 B，它只调用一次。
- transitionsBuilder：用来设置动画的属性。
- transitionDuration：动画的时长
- reverseTransitionDuration：reverse的动画时长（比如点击返回时）。
2. SlideTransition
SlideTransition可以实现组件的移动，从下向上实现页面切换实际上是让页面 B 从Offset(0,1.0)变化到Offset(0.0,0.0)。
提示
手持弹幕一文介绍了如何使用SlideTransition，读者可以自行前往阅读。
3. 完整代码
通过以上分析，实现从下向上页面切换非常简单，完整代码如下，其中transitionsBuilder包含4个参数，child为pageBuilder的返回值，即Page2。
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
home: Page1(),
),
);
}
class Page1 extends StatelessWidget {
const Page1({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(_createRoute());
},
child: const Text('Go!'),
),
),
);
}
}
Route _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
reverseTransitionDuration: const Duration(seconds: 2),
transitionDuration: const Duration(seconds: 2),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 1);
const end = Offset.zero;
const curve = Curves.linear;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(
position: tween.animate(animation),
child: child,
);
},
);
}
class Page2 extends StatelessWidget {
const Page2({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: const Center(
child: Text('Page 2'),
),
);
}
}