一文带你了解 Flutter 路由

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

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

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

动态路由

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

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

动态路由跳转

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

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

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

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中用于导航到指定页面的常用方法。

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

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

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

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

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

静态路由

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

Flutter中静态路由的常用API:

使用静态路由步骤：

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

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

@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(),
      },
      ),
    );
  }
}

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

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

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

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

路由返回

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

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

需要注意以下几点事项：

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

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

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

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

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

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

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

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

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

关于MaterialApp 配置

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

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