flutter 路由管理- Navigator的push和pop

      在 Flutter 中，屏 (screen) 和 页面 (page) 都叫做 路由 (route)，在下文中统称为“路由 (route)”。

      在 Android 开发中，Activity 相当于“路由”，在 iOS 开发中，ViewController 相当于“路由”，在 Flutter 中，“路由”也是一个 widget。怎样从一个“路由”跳转到新的“路由”就是我们接下来要讲的路由管理。

      Flutter 中的路由管理和原生开发类似，无论是 Android 还是 iOS，导航管理都会维护一个路由栈，路由入栈（push）操作对应打开一个新页面，路由出栈（pop）操作对应页面关闭操作返回到上一个页面，当前屏幕显示的页面就是栈顶的路由，而路由管理主要是指如何来管理该路由栈。

      Navigator类是flutter一个路由管理的组件，提供了一系列方法来管理路由栈。下边我们先结合flutter官方文档上例子介绍其最常用的两个方法，既Navigator.push() 和Navigator.pop() 。

1. Future push(BuildContext context, Route route)

    通过使用 Navigator.push() 方法将给定的 Route 对象入栈，即跳转到新的路由页面。

2. bool pop(BuildContext context, [ result ])

     pop() 方法会从堆栈上移除 Route 对象（出栈），它将关闭当前页面返回上一个页面，其result 为页面关闭时返回给上一个页面的数据。

     在Navigator类中第一个参数为context的静态方法都有对应一个Navigator的实例方法， 比如Navigator.push(BuildContext context, Route route)等价于Navigator.of(context).push(Route route)，看一下Navigator.push() 和Navigator.pop() 态方法源码，其中也是使用Navigator.of(context).[方法]来实现的。

import'package:flutter/foundation.dart';
import'package:flutter/material.dart';
voidmain() {
runApp(constMaterialApp(
title: '路由管理',
home: FirstRoute(),
  ));
}
//创建界面一classFirstRouteextendsStatelessWidget {
constFirstRoute({super.key});
@overrideWidgetbuild(BuildContextcontext) {
returnScaffold(
appBar: AppBar(
title: constText("页面一"),
      ),
body: Center(
child: ElevatedButton(
child: constText("跳转"),
onPressed: () async {
// 使用Navigator.push跳转到界面二varresult=awaitNavigator.push(context,
MaterialPageRoute(builder: (context) =>constSecondRoute(text: "页面二",)),
              );
if (kDebugMode) {
print("路由返回值: $result");
               }
          },
        ),
      ),
    );
  }
}
classSecondRouteextendsStatelessWidget {
finalStringtext;
constSecondRoute({super.key,requiredthis.text});
@overrideWidgetbuild(BuildContextcontext) {
returnScaffold(
appBar: AppBar(
title:  Text(text),
      ),
body: Center(
child: ElevatedButton(
onPressed: () {
// 使用Navigator.pop跳转到界面一Navigator.pop(context,"我是返回值");
          },
child: constText('返回'),
        ),
      ),
    );
  }
}

      在这个例子中，我们通过调Navigator.push()跳转到页面二，然后在调Navigator.pop() 返回到页面一，实现了界面之间的跳转和返回。

      在使用Navigator.push() 和Navigator.pop() 我如何进行路由传值呢，其实非常简单，在Navigator.push() 我们可以通过实例化新页面的构造函数将需要的参数给下一个页面，在Navigator.pop()时我们通过pop的result参数将数据返回给上一个页面。