Flutter如何实现自定义PagerouteBuilder页面切换

在Flutter中如何使用自定义的PageRouteBuilder实现页面切换动画？我想实现一个非系统默认的过渡效果，比如从底部滑入或渐变出现，但不太清楚如何正确配置PageRouteBuilder的transitionsBuilder参数。能否提供一个完整的示例代码，展示如何自定义页面切换动画？最好能同时说明如何控制动画时长和曲线。

2 回复

在Flutter中，使用PageRouteBuilder实现自定义页面切换。通过重写pageBuilder和transitionsBuilder，可自定义动画和过渡效果。例如，使用SlideTransition实现滑动切换，或FadeTransition实现淡入淡出。

更多关于Flutter如何实现自定义PagerouteBuilder页面切换的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过自定义 PageRouteBuilder 来实现自定义页面切换动画。以下是实现步骤和示例代码：

1. 基本结构

使用 PageRouteBuilder 构造函数，定义 pageBuilder 和 transitionsBuilder。

2. 示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第一页')),
      body: Center(
        child: ElevatedButton(
          child: Text('跳转'),
          onPressed: () {
            Navigator.push(
              context,
              CustomPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二页')),
      body: Center(
        child: ElevatedButton(
          child: Text('返回'),
          onPressed: () => Navigator.pop(context),
        ),
      ),
    );
  }
}

// 自定义 PageRoute
class CustomPageRoute extends PageRouteBuilder {
  final WidgetBuilder builder;

  CustomPageRoute({required this.builder})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => builder(context),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            // 自定义动画效果
            var curve = Curves.easeInOut;
            var tween = Tween(begin: 0.0, end: 1.0).chain(CurveTween(curve: curve));
            var fadeAnimation = animation.drive(tween);

            return FadeTransition(
              opacity: fadeAnimation,
              child: child,
            );
          },
          transitionDuration: Duration(milliseconds: 500), // 动画时长
        );
}

3. 自定义动画效果

在 transitionsBuilder 中，可以组合多种动画：

  • 缩放效果：
    return ScaleTransition(
  scale: animation,
  child: child,
);
  • 滑动效果：
    return SlideTransition(
  position: Tween<Offset>(
    begin: Offset(1.0, 0.0),
    end: Offset.zero,
  ).animate(animation),
  child: child,
);
  • 旋转效果：
    return RotationTransition(
  turns: animation,
  child: child,
);

4. 组合动画

使用 Stack 和多个 Transition 组件组合复杂动画。

注意事项

  • 调整 transitionDuration 控制动画时长。
  • 使用 Curves 类调整动画曲线。
  • 确保 pageBuilder 返回目标页面。

通过以上方法，可以灵活实现各种页面切换动画效果。

回到顶部