Flutter自定义路由过渡动画插件route_transitions_lz_custom的使用

Flutter自定义路由过渡动画插件route_transitions_lz_custom的使用

特性

• 可定制的页面过渡动画。
• 支持标准导航和替换导航。

使用示例

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我的首页'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 导航到新页面并使用淡入动画过渡。
            RouteTransitionsLzCustom(
              context,
              child: MyNewPage(),
              animation: AnimationType.fadeIn,
            );
          },
          child: Text('打开新页面'),
        ),
      ),
    );
  }
}

class MyNewPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我的新页面'),
      ),
      body: Center(
        child: Text('这是我的新页面。'),
      ),
    );
  }
}

入门指南

前提条件

在开始之前，请确保满足以下要求：

• 确保在本地机器上安装了Flutter和Dart。

额外信息

• 如需了解如何使用该包及其示例，请查看包仓库中的/example文件夹。

安装

要在Flutter项目中使用此包，请将其作为依赖项添加到pubspec.yaml文件中：

dependencies:
  route_transitions_lz_custom: ^1.0.0

示例代码

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

// 这是应用程序的主要入口点。
void main() {
  // 启动应用程序。
  runApp(MyApp());
}

// 这是应用程序的主要类。
class MyApp extends StatelessWidget {
  // 当应用程序首次构建时调用此方法。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      // 设置应用程序的初始路由。
      initialRoute: 'page1',
      // 定义应用程序的路由。
      routes: {
        // 第一个页面的路由。
        'page1': (context) => const Page1(),
        // 第二个页面的路由。
        'page2': (context) => const Page2(),
      },
    );
  }
}

// 这是应用程序的第一个页面。
class Page1 extends StatelessWidget {
  // Page1 类的构造函数。
  const Page1({super.key});

  // 当页面构建时调用此方法。
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 返回一个Scaffold小部件。
    return Scaffold(
      // 设置Scaffold的小部件。
      appBar: AppBar(
        // 设置AppBar的标题。
        title: const Text('页面1'),
        // 设置AppBar的背景颜色为透明。
        backgroundColor: Colors.transparent,
      ),
      // 设置Scaffold的背景颜色为蓝色。
      backgroundColor: Colors.blue,
      // 设置Scaffold的主体为一个居中的MaterialButton。
      body: Center(
        child: MaterialButton(
          // 设置MaterialButton的颜色为白色。
          color: Colors.white,
          // 设置MaterialButton的点击回调以导航到第二个页面，并使用淡入动画过渡。
          onPressed: () {
            RouteTransitionsLzCustom(
              // 传递应用的上下文。
              context: context,
              // 传递要导航的目标小部件。
              child: const Page2(),
              // 设置动画类型为淡入。
              animation: AnimationType.fadeIn,
              // 设置动画持续时间为100毫秒。
              duration: const Duration(milliseconds: 100),
              // 设置替换标志为true，这意味着第二个页面将替换第一个页面在导航栈中。
              replacement: true,
            );
          },
          // 设置MaterialButton的子元素为一个文本按钮。
          child: const Text('跳转到页面2'),
        ),
      ),
    );
  }
}

// 这是应用程序的第二个页面。
class Page2 extends StatelessWidget {
  // Page2 类的构造函数。
  const Page2({super.key});

  // 当页面构建时调用此方法。
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 返回一个Scaffold小部件。
    return Scaffold(
      // 设置Scaffold的小部件。
      appBar: AppBar(
        // 设置AppBar的标题。
        title: const Text('页面2'),
        // 设置AppBar的背景颜色为透明。
        backgroundColor: Colors.transparent,
      ),
      // 设置Scaffold的背景颜色为蓝灰色。
      backgroundColor: Colors.blueGrey,
      // 设置Scaffold的主体为一个居中的Text小部件。
      body: const Center(
        child: Text('页面2'),
      ),
    );
  }
}