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

命名路由

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

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

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

路由表实际上是一个 Map<String,WidgetBuilder>，其中 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<Three> {
  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: <Widget>[
              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;

运行下代码，效果如下

本文由博客一文多发平台 OpenWrite 发布！