`TransitionBuilder`是Flutter中的一个回调函数，用于构建过渡动画。它通常与`PageRouteBuilder`一起使用，用于自定义页面切换时的过渡动画。
在`PageRouteBuilder`中，可以通过`transitionBuilder`参数来指定一个`TransitionBuilder`回调函数，该函数接受两个参数：`BuildContext`和`Animation`。`BuildContext`表示当前上下文，`Animation`表示当前动画的进度。
在`TransitionBuilder`回调函数中，我们可以根据动画进度来构建自定义的过渡动画。例如，我们可以使用`FadeTransition`、`SlideTransition`或`ScaleTransition`等内置的过渡动画组件，也可以自定义动画。
以下是一个示例代码，演示如何使用`TransitionBuilder`和`PageRouteBuilder`来实现自定义的页面切换动画：
```dart
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Transition Demo'),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.of(context).push(
PageRouteBuilder(
transitionDuration: Duration(milliseconds: 500),
transitionsBuilder:
(context, animation, secondaryAnimation, child) {
return ScaleTransition(
scale: Tween(begin: 0.0, end: 1.0)
.animate(CurvedAnimation(
parent: animation,
curve: Curves.easeInOut,
)),
child: child,
);
},
pageBuilder: (context, animation, secondaryAnimation) =>
SecondPage(),
),
);
},
child: Text('Go to Second Page'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Go Back'),
),
),
);
}
}
```
在上面的示例中，我们
AI助手
资讯
常用工具
网站模板