Flutter 中的路由动画：自定义页面切换效果

Flutter 中的路由动画：自定义页面切换效果

5 回复

使用PageRouteBuilder类自定义路由动画。

更多关于Flutter 中的路由动画：自定义页面切换效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以通过 PageRouteBuilder 自定义路由动画，结合 AnimatedWidget 实现页面切换效果，如渐变、缩放等。

在 Flutter 中，可以通过 PageRouteBuilder 自定义路由动画。首先，创建一个继承自 PageRouteBuilder 的类，然后在 transitionsBuilder 中定义页面切换的动画效果，如缩放、滑动、淡入淡出等。最后，使用 Navigator.push 或 Navigator.pushReplacement 应用自定义路由。例如：

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 500),
    pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

此示例实现了页面切换时的淡入效果。

使用PageRouteBuilder类可以自定义 Flutter 页面切换动画。

在 Flutter 中，你可以通过自定义路由动画来实现独特的页面切换效果。Flutter 提供了 PageRouteBuilder 类，允许你自定义页面的转场动画。以下是一个简单的示例，展示了如何实现一个从底部滑入的页面切换效果。

import 'package:flutter/material.dart';

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

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Next Page'),
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => NextPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0, 1.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Next Page')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

代码说明：

  1. PageRouteBuilder: 用于创建自定义路由。pageBuilder 定义了目标页面，transitionsBuilder 定义了页面切换时的动画效果。
  2. SlideTransition: 用于实现滑动效果。通过 Tween 和 Curve 来控制滑动的起始点、结束点和动画曲线。
  3. Offset: 定义滑动的起始和结束位置。Offset(0.0, 1.0) 表示从底部开始滑动，Offset.zero 表示滑动到屏幕中央。

你可以根据需要修改 transitionsBuilder 中的动画逻辑，实现不同的页面切换效果，如淡入淡出、缩放、旋转等。

回到顶部