全面解析Flutter路由：一篇文章带你轻松掌握

Flutter中的Navigator是用于管理页面路由的类。它可以帮助您在应用程序中导航到不同的屏幕或页面。

以下是Navigator的详细使用和动态路由与静态路由的区别：

功能	描述
静态路由	在编译时定义所有路由，并在需要导航时直接使用路由名称进行跳转。
动态路由	在运行时根据条件或用户操作来决定要导航到哪个页面，可以通过传递参数来自定义每个页面。

在Flutter中，静态路由是一种通过预定义的路由表来进行页面导航的方式。它使用路由名称作为标识符，并将每个路由名称映射到相应的页面组件。

动态路由

在Flutter中，动态路由是根据条件或用户操作来决定要导航到哪个页面，并可以通过传递参数来自定义每个页面。您可以使用Navigator.push方法和MaterialPageRoute来实现动态路由。

动态路由的常用API和示例代码：

API	描述
Navigator.push(context, MaterialPageRoute(builder: (context) => Screen()))	导航到指定的页面组件。
MaterialPageRoute(builder: (context) => Screen())	创建一个新的页面路由。
builder	定义页面组件的构建函数。
arguments	传递给目标页面的参数。

动态路由跳转

less 复制代码

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => MyHomePage() ); 
);

MaterialPageRoute 创建了一个要导向的页面路由，另外我们可以通过往页面里传递参数来达到路由通信，前提是在跳转路由页面定义好接受的参数。

less 复制代码

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => Test(title: '动态路由传递参数'),
  )
);

scala 复制代码

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


class Test extends StatelessWidget {

final String title;  //定义参数
const Test({super.key ,required this.title}); 

  @override
  Widget build(BuildContext context){
    return  Scaffold(
      body: Container(
        child: Column(
          children: [
            Text(title),
            ElevatedButton(
              child: Text('跳转到home页，并且传递参数'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyHomePage() )
                );
              },
            )
          ],
        )
      )
    );
  }
}

关于 Navigator.push

Navigator.push(context, MaterialPageRoute(builder: (context) => Screen())) 是在Flutter中用于导航到指定页面的常用方法。

这个方法的具体步骤如下：

context 参数是当前上下文，它提供了访问路由和其他相关信息的能力。
MaterialPageRoute 是一个页面路由对象，它负责创建新的页面并管理页面切换动画等细节。
builder 是一个匿名函数，它定义了要构建的目标页面的内容。在这个函数中，您可以返回一个新的页面组件实例。
Screen() 是目标页面的组件类，它将被实例化并显示在屏幕上。

当调用 Navigator.push(context, MaterialPageRoute(builder: (context) => Screen())) 时，以下操作将发生：

Flutter会根据提供的 context 找到最近的 Navigator 对象。
MaterialPageRoute 将被创建，并使用提供的 builder 函数来构建目标页面的内容。
新的页面组件实例将被创建。
页面切换动画将被应用，将当前页面切换到目标页面。
目标页面将显示在屏幕上。

通过这种方式，您可以使用Navigator.push方法和MaterialPageRoute来实现页面之间的导航和切换。

静态路由

在Flutter中，静态路由是一种通过预定义的路由表来进行页面导航的方式。它使用路由名称作为标识符，并将每个路由名称映射到相应的页面组件。

Flutter中静态路由的常用API:

API	描述
MaterialApp	根部小部件，用于定义应用程序的基本配置和路由。
home	定义应用程序的初始页面。
routes	定义应用程序的静态路由映射表。
onGenerateRoute	定义应用程序的动态路由生成函数。
Navigator.pushNamed(context, routeName)	导航到指定名称的静态路由。
ModalRoute.of(context)?.settings.arguments	获取当前页面的传递参数。

使用静态路由步骤：

在MaterialApp小部件中设置routes属性，该属性接受一个Map<String, WidgetBuilder>类型的映射表，其中键是路由名称，值是对应页面的构建函数。

并且必须需要通过 initialRoute 来指定初始路由。

less 复制代码

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        // home: MyHomePage(),  这个就不需要了
        initialRoute: '/', //指定初始路由 / 对应的页面
        routes: {    //需要的跳转的路由放到 routes 数组里
        '/': (context) => MyHomePage(),
        '/tab': (context) => MyTab(),
      },
      ),
    );
  }
}

在需要导航到其他页面的地方，使用Navigator.pushNamed(context, routeName)方法来触发导航操作。routeName参数是目标页面的路由名称。

arduino 复制代码

Navigator.pushNamed(context, '/tab');

⚠️注意: 静态路由不支持传递参数

请注意，静态路由不支持传递参数。在Flutter中，静态路由本身不直接支持传递参数。静态路由是通过预定义的路由表进行页面导航的方式，每个路由名称映射到相应的页面组件。

路由返回

在Flutter中，可以使用 Navigator.pop() 方法来执行路由返回操作。该方法将从导航堆栈中移除当前页面，并返回到上一个页面。

scss 复制代码

// 在当前页面执行路由返回操作
Navigator.pop(context);

*需要注意以下几点事项：

context 参数： context 是BuildContext对象，通常可以在小部件的 build 方法中直接使用。如果您在其他地方使用 Navigator.pop() ，请确保传递正确的 BuildContext 对象。
返回值： Navigator.pop() 方法可以返回一个值给上一个页面。您可以在调用 Navigator.pop() 时传递一个值作为返回值。

arduino 复制代码

// 在当前页面执行路由返回操作，并传递一个值给上一个页面
Navigator.pop(context, '返回值');

在上一个页面，您可以通过 await Navigator.push() 方法获取返回的值。

路由返回动画：路由返回时，默认会应用一个过渡动画。您可以通过自定义过渡动画来改变返回时的动画效果。

less 复制代码

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => NextPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(opacity: animation, child: child);
    },
  ),
);

在上述示例中，使用了 PageRouteBuilder 来自定义页面过渡动画，这里使用了一个淡入淡出的效果。

注意导航堆栈：在执行路由返回操作时，请确保导航堆栈中有足够的页面可供返回。如果导航堆栈为空，可能会导致异常或应用程序退出。 您可以通过 Navigator.canPop(context) 方法检查是否可以执行路由返回操作。

scss 复制代码

if (Navigator.canPop(context)) {
  Navigator.pop(context);
}

这些是使用路由返回的常见用法和注意事项。请根据您的具体需求和应用场景进行适当的使用和处理。

关于MaterialApp 配置

MaterialApp是Flutter中的一个重要小部件，它作为应用程序的根部小部件，并提供了一些基本的配置和功能。

属性	描述
title	应用程序的标题，通常显示在任务管理器中或设备的应用程序切换器中。
home	应用程序的初始页面，通常是一个Widget。
routes	定义应用程序的静态路由映射表，将路由名称映射到相应的页面组件。
onGenerateRoute	定义应用程序的动态路由生成函数，可以根据需要自定义路由处理逻辑。
navigatorKey	用于访问导航器的全局键，可以在应用程序的任何地方使用该键来执行导航操作。
initialRoute	指定应用程序的初始路由名称，如果设置了home属性，则忽略此属性。
onUnknownRoute	定义当导航到未知路由时的处理逻辑，可以显示错误页面或执行其他操作。
theme	应用程序的主题样式，包括颜色、字体和其他视觉属性。
darkTheme	应用程序的暗黑模式主题样式，可以与theme属性一起使用，根据系统设置自动切换主题。
themeMode	定义应用程序的主题模式，可以是ThemeMode.light、ThemeMode.dark或ThemeMode.system。
debugShowCheckedModeBanner	控制是否显示调试模式下的横幅标志，默认为true。

这些属性使您能够配置应用程序的基本行为、外观和导航功能。通过使用MaterialApp，您可以创建一个遵循Material Design准则的Flutter应用程序，并轻松管理页面之间的导航。