切换页面_Flutter 之页面切换（命名路由）

古城微笑少年丶 2022-11-19 12:42 250阅读 0赞

命名路由

之前的文章介绍过基本路由，使用基本路由相对简单灵活，适用于应用中页面不多的场景。而在应用中页面比较多的情况下，再使用基本路由，会导致大量的重复代码，此时使用命名路由会非常方便

路由命名即给页面起个名字，然后直接通过页面名字即可打开该页面

要通过名字来指定打开的页面，必须先给应用程序 MaterialApp 提供一个页面名称映射规则，即路由表 routes

路由表实际上是一个 Map ，其中 key 对应页面名字，value 则是一个 WidgetBuilder 回调方法，我们需要在 WidgetBuilder 回调方法中创建对应的页面。在路由表中定义好页面名字后，就可以通过 Navigator.pushNamed 来打开页面

如下代码演示了命名路由的使用方法

首先定义一个路由集 Routes.dart

import 'package:flutter/material.dart';import 'package:flutter_app_route/main.dart';final String home = '/';final String secondPage = '/SecondPage';final String threePage = '/ThreePage';final String fourPage = '/FourPage';// 配置路由命名信息final routes = { home: (context) => Home(), secondPage: (context) => Second(), threePage: (context) => Three(), fourPage: (context) => Four(),};class UnknownPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('跳转错误'), centerTitle: true, ), ); }}

接着在 MyNameRouteApp 中注册路由及错误页面路由

class MyNameRouteApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter', // 注册路由 routes: mRoutes.routes, onUnknownRoute: (RouteSettings setting) => MaterialPageRoute(builder: (context) => mRoutes.UnknownPage()), ); }}

接下来，在第一页中有个按钮，点击按钮跳转至第二页

class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton( onPressed: () { Navigator.pushNamed(context, mRoutes.secondPage); }, child: Text('下一页'), ), ); }}

第二页中也是按钮，点击后销毁当前页并跳转至第三页，并给第三页传值

class Second extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('第二页'), centerTitle: true, ), body: Center( child: RaisedButton( onPressed: () { // 将当前页面替换为新页面，即跳转到新页面后将当前页面从堆栈中移除 Navigator.pushReplacementNamed(context, mRoutes.threePage, arguments: 'Android小白营'); }, child: Text('跳转至下一页，并移除当前页')), ), ); }}

第三页中有一个按钮和两个 Text，一个 Text 用于显示第二页传过来的信息，一个 Text 用于显示第四页关闭时回传过来的信息

class Three extends StatefulWidget { @override _ThreeState createState() => _ThreeState();}class _ThreeState extends State { String _msg = ''; @override Widget build(BuildContext context) { String name = ModalRoute.of(context).settings.arguments as String; return Scaffold( appBar: AppBar( title: Text('第三页'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ RaisedButton( onPressed: () { // 打开Four页面，并监听Four页面关闭时传递的参数 Navigator.pushNamed(context, mRoutes.fourPage) .then((msg) => setState(() => _msg = msg)); }, child: Text('打开页面，并在页面关闭时传递参数'), ), Text(name), Text(_msg) ], ),// child: Text(name), )); }}

第四页中有一个按钮，用于关闭当前页并向上一页传值

class Four extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: RaisedButton( onPressed: () { // 关闭页面并传递参数 Navigator.pop(context, '欢迎关注"Android小白营"'); }, child: Text('退出'), )), ); }}

其中 mRoutes 为路由集 Routes.dart 的引用

import 'package:flutter_app_route/routes/Routes.dart' as mRoutes;

运行下代码，效果如下

![fc826181b1f061c7e6f6c9cd01c7a95b.gif][]

> 本文由博客一文多发平台 https://openwrite.cn?from=article\_bottom 发布！

[fc826181b1f061c7e6f6c9cd01c7a95b.gif]: /images/20221119/01ac19f6e8c74af29c6117a4ace237a1.png