Flutter导航构建插件navigation_builder的使用

navigation_builder是一个强大的Flutter插件，用于简化和增强应用中的导航功能。本文将详细介绍如何使用该插件，并提供一个完整的示例demo。

安装与配置

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  navigation_builder: ^最新版本号

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

基本使用

创建导航器

要使用navigation_builder，需要创建一个全局的NavigationBuilder实例，并将其配置到MaterialApp.router或CupertinoApp.router中。

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

final myNavigator = NavigationBuilder.create(
  routes: {
    '/': (RouteData data) => HomePage(),
    '/page1': (RouteData data) => Page1(),
    '/page2': (RouteData data) => Page2(),
  },
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: myNavigator.routerConfig,
    );
  }
}

导航方法

命令式导航

// 导航到指定页面
myNavigator.to('/page1');

// 替换当前页面
myNavigator.toReplacement('/page1');

// 导航并移除之前的页面直到指定页面
myNavigator.toAndRemoveUntil('/page2', untilRouteName: '/page1');

// 返回上一页
myNavigator.back();

// 强制返回（忽略`onNavigateBack`钩子）
myNavigator.forceBack();

声明式导航

myNavigator.setRouteStack((pages) {
  // 返回新的路由栈
  return [...newPagesList];
});

页面转换动画

可以为所有页面设置默认的过渡动画，也可以为特定页面或导航调用设置自定义动画。

final myNavigator = NavigationBuilder.create(
  transitionsBuilder: RM.transitions.leftToRight(),
  routes: {
    '/': (_) => HomePage(),
    '/page1': (_) => RouteWidget(
          builder: (_) => Page1(),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return FadeTransition(
              opacity: animation,
              child: child,
            );
          },
        ),
    '/page2': (_) => Page2(),
  },
);

示例Demo

以下是一个完整的示例demo，展示如何使用navigation_builder进行基本的页面导航和页面转换动画。

main.dart

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

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

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => myNavigator.to('/page1'),
          child: Text('Go to Page 1'),
        ),
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => myNavigator.to('/page2'),
          child: Text('Go to Page 2'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => myNavigator.back(),
          child: Text('Back to Page 1'),
        ),
      ),
    );
  }
}

final myNavigator = NavigationBuilder.create(
  routes: {
    '/': (RouteData data) => HomePage(),
    '/page1': (RouteData data) => Page1(),
    '/page2': (RouteData data) => Page2(),
  },
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: myNavigator.routerConfig,
    );
  }
}