flutter 路由管理- Navigator的push和pop

简介： Navigator类是flutter一个路由管理的组件，通过一个栈来管理活动路由集合，通常当前屏幕显示的页面就是栈顶的路由。
在 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';

void main() {
  runApp(const MaterialApp(
    title: '路由管理',
    home: FirstRoute(),
  ));
}
//创建界面一
class FirstRoute extends StatelessWidget {
  const FirstRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("页面一"),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("跳转"),
          onPressed: () async {
              // 使用Navigator.push跳转到界面二
             var result = await Navigator.push(context,
                MaterialPageRoute(builder: (context) =>  const SecondRoute(text: "页面二",)),
              );
               if (kDebugMode) {
                 print("路由返回值: $result");
               }
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  final String text;
  const SecondRoute({super.key,required this.text});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:  Text(text),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 使用Navigator.pop跳转到界面一
            Navigator.pop(context,"我是返回值");
          },
          child: const Text('返回'),
        ),
      ),
    );
  }
}

在这个例子中，我们通过调Navigator.push()跳转到页面二，然后在调Navigator.pop() 返回到页面一，实现了界面之间的跳转和返回。
在使用Navigator.push() 和Navigator.pop() 我如何进行路由传值呢，其实非常简单，在Navigator.push() 我们可以通过实例化新页面的构造函数将需要的参数给下一个页面，在Navigator.pop()时我们通过pop的result参数将数据返回给上一个页面。

转自：https://developer.aliyun.com/article/1172129