Flutter实战 - 通过 Navigator 进行路由管理

原文地址： Flutter 路由使用

前言

路由(Route)在移动开发中通常指页面（Page），这跟web开发中单页应用的Route概念意义是相同的，Route在Android中通常指一个Activity，在iOS中指一个ViewController。Flutter中，Route的管理是在内部维护一个路由栈，通过 Navigator 的 push、pop操作，实现路由的入栈和出栈操作，达到页面开启关闭的效果。

1.构建路由的两种方式

Flutter中，构建路由存在两种方式：普通路由 与 命名路由。普通路由也可以称为 “构建路由”，在需要使用的地方直接构建一个新路由。命名路由是提前将路由维护在 routes 中，并为每一个路由都创建一个别名，在需要使用的地方，直接通过别名进行访问。

• 普通路由，通过 MaterialPageRoute 构建

MaterialPageRoute(
	builder: (content){
   
		return Page();
	},
	settings: RouteSettings(
		arguments: {
   
			"name": "zhangsan"
		}
	)
)

class Page extends StatelessWidget{
   
    Widget build(BuildContext context) {
   
        return Text("Page");
    }
}

• 命名路由，通过 routes 维护，ModalRoute.withName() 进行访问

class MyApp extends StatelessWidget {
   
  Widget build(BuildContext context) {
   
    return MaterialApp(
        // 路由
        routes: {
   
          "Page":(BuildContext context) => Page(),
        }
    );
  }
}

// 访问
ModalRoute.withName("Page") 

2.命名路由的基本使用

• Navigator.pushNamed

  执行入栈操作，打开指定页面，这里打开的页面必须在 routes 中进行了配置

  Navigator.pushNamed(context, "Page")
  

  如果打开的页面没有在 routes 中进行配置，则会出现报错。

  Could not find a generator for route RouteSettings("Page", null) in the _WidgetsAppState.
  

  路由栈变化：
  

• Navigator.pushNamedAndRemoveUntil

  前往并且删除路由，这里可以指定需要保留的路由，也可以直接在返回 true 或者 false 来确定是否删除整个路由栈。

  // 打开 Page4 页面，并且删除 Page1 至 Page4 之间的路由
  
  Navigator.pushNamedAndRemoveUntil(context, "Page4", ModalRoute.withName("Page1"))
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ZMNJSr8-1619094680135)(https://z3.ax1x.com/2021/04/16/cfjvuQ.png)]

  // 去除路由栈中的所有路由 只保留当前
  Navigator.pushNamedAndRemoveUntil(context, "Page4", (router)=>false);
  
  // 保留当前路由栈
  Navigator.pushNamedAndRemoveUntil(context, "Page4", (router)=>true);
  

• Navigator.pushReplacementNamed

  使用新路由来替换当前路由栈 栈顶的路由

  Navigator.pushReplacementNamed(