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

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

页面路由过渡动画插件Route Transitions 的使用

route_transitions_jpmg 是一个用于 Flutter 的包，可以自定义从一个屏幕到另一个屏幕的过渡动画。

使用方法

RouteTransitions(
    context: context,
    child: Page2Screen(),
    animation: AnimationType.fadeIn,
);

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      initialRoute: 'page1',
      routes: {
        'page1': (context) => Page1Screen(),
        'page2': (context) => Page2Screen(),
      }
    );
  }
}

class Page1Screen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 1'),
        backgroundColor: Colors.transparent
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          onPressed: () {
            // 使用RouteTransitions进行页面跳转，并设置动画类型为fadeIn
            Navigator.of(context).push(
              RouteTransitions(
                context: context,
                child: Page2Screen(),
                animation: AnimationType.fadeIn,
                duration: const Duration(milliseconds: 500),
                replacement: true,
              ),
            );
          },
          color: Colors.white,
          child: const Text('Go to page 2'),
        )
     ),
   );
  }
}

class Page2Screen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
        backgroundColor: Colors.transparent
      ),
      backgroundColor: Colors.blueGrey,
      body: const Center(
        child: Text('Hello World'),
     ),
   );
  }
}

解释

  1. 导入包:

    import 'package:route_transitions_jpmg/route_transitions_jpmg.dart';

  2. 创建MaterialApp:

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      initialRoute: 'page1',
      routes: {
        'page1': (context) => Page1Screen(),
        'page2': (context) => Page2Screen(),
      }
    );
  }
}

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

1 回复

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


route_transitions_jpmg 是一个用于在 Flutter 应用中实现页面路由过渡动画的插件。它提供了多种内置的过渡效果，并且可以轻松地自定义过渡动画。以下是如何使用 route_transitions_jpmg 插件的详细步骤。

1. 添加依赖

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

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

然后运行 flutter pub get 来安装依赖。

2. 基本使用

route_transitions_jpmg 提供了多种内置的过渡效果，比如 SlideTransition, ScaleTransition, FadeTransition, RotationTransition, SizeTransition, 和 CustomTransition。

以下是一个简单的示例，展示如何使用 SlideTransition 进行页面过渡：

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

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

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              SlideRouteTransition(
                page: SecondScreen(),
                slideDirection: SlideDirection.right, // 从右向左滑动
              ),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

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

3. 其他过渡效果

除了 SlideTransition，你还可以使用其他内置的过渡效果。以下是几个示例：

使用 ScaleTransition：

Navigator.push(
  context,
  ScaleRouteTransition(
    page: SecondScreen(),
  ),
);

使用 FadeTransition：

Navigator.push(
  context,
  FadeRouteTransition(
    page: SecondScreen(),
  ),
);

使用 RotationTransition：

Navigator.push(
  context,
  RotationRouteTransition(
    page: SecondScreen(),
  ),
);

使用 SizeTransition：

Navigator.push(
  context,
  SizeRouteTransition(
    page: SecondScreen(),
  ),
);

4. 自定义过渡效果

如果你需要自定义过渡效果，可以使用 CustomRouteTransition。以下是一个自定义过渡效果的示例：

Navigator.push(
  context,
  CustomRouteTransition(
    page: SecondScreen(),
    transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
      return FadeTransition(
        opacity: animation,
        child: ScaleTransition(
          scale: animation,
          child: child,
        ),
      );
    },
  ),
);

5. 配置过渡持续时间

你可以通过 duration 参数来配置过渡动画的持续时间：

Navigator.push(
  context,
  SlideRouteTransition(
    page: SecondScreen(),
    slideDirection: SlideDirection.right,
    duration: Duration(milliseconds: 500), // 设置过渡时间为500毫秒
  ),
);
回到顶部