Flutter页面路由过渡动画插件route_transitions_lr的使用

Route Transitions

该插件帮助实现页面路由的过渡效果。

示例代码

使用步骤

首先确保你已经添加了 route_transitions_lr 插件到你的 pubspec.yaml 文件中：

dependencies:
  route_transitions_lr: ^版本号

然后运行以下命令安装依赖：

flutter pub get

接下来是一个完整的示例代码，展示如何在 Flutter 应用中使用 route_transitions_lr 插件来实现页面路由过渡动画。

示例代码

import 'package:flutter/material.dart';
import 'package:route_transitions_lr/route_transitions_lr.dart';

void main() => runApp(const MyApp());

// 主应用类
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      initialRoute: 'page1', // 初始页面
      routes: {
        'page1': (_) => const Page1(), // 页面1
        'page2': (_) => const Page2(), // 页面2
      },
    );
  }
}

// 页面1
class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page1'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          onPressed: () {
            // 使用 Routetransitions 实现页面跳转并设置过渡动画
            Routetransitions(
              context: context, // 当前上下文
              child: const Page2(), // 跳转的目标页面
              animation: AnimationType.fadeIn, // 动画类型（淡入）
              duration: const Duration(seconds: 1), // 动画持续时间
              replacement: true, // 是否替换当前页面
            );
          },
          color: Colors.white,
          child: const Text('Go to page2'), // 按钮文本
        ),
      ),
    );
  }
}

// 页面2
class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page2'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blueGrey,
      body: const Center(
        child: Text('Page2'), // 页面内容
      ),
    );
  }
}

更多关于Flutter页面路由过渡动画插件route_transitions_lr的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼•9 天前

更多关于Flutter页面路由过渡动画插件route_transitions_lr的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

route_transitions_lr 是一个用于 Flutter 的插件，它提供了左右滑动的页面路由过渡动画。使用这个插件可以让你在页面之间切换时，实现类似于 iOS 或 Android 上的左右滑动效果。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 route_transitions_lr 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  route_transitions_lr: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用插件

route_transitions_lr 提供了一个 RouteTransitions 类，你可以使用它来替换 Navigator.push 方法，从而实现左右滑动的过渡动画。

基本使用

import 'package:flutter/material.dart';
import 'package:route_transitions_lr/route_transitions_lr.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            RouteTransitions(
              context: context,
              child: SecondPage(),
              animation: AnimationType.slideLeft, // 从右向左滑动
            );
          },
          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: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // 返回上一页
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

动画类型

RouteTransitions 提供了以下几种动画类型：

AnimationType.slideLeft: 从右向左滑动
AnimationType.slideRight: 从左向右滑动
AnimationType.slideUp: 从下向上滑动
AnimationType.slideDown: 从上向下滑动

你可以根据需要选择合适的动画类型。

自定义动画

如果你想要自定义动画，可以使用 RouteTransitions.custom，并提供一个 PageRouteBuilder：

RouteTransitions.custom(
  context: context,
  child: SecondPage(),
  pageRouteBuilder: (context, animation, secondaryAnimation, child) {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => child,
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        var begin = Offset(1.0, 0.0);
        var end = Offset.zero;
        var curve = Curves.easeInOut;
        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
        var offsetAnimation = animation.drive(tween);

        return SlideTransition(
          position: offsetAnimation,
          child: child,
        );
      },
    );
  },
);