Flutter中的替换路由、返回到根路由

• 替换路由

当我们有三个页面，页面1，页面2，页面3。

期望点击页面1按钮，跳转到页面2，页面2点击返回，跳转到页面1；

点击页面2按钮，跳转到页面3，页面3点击返回，跳转到页面1，而不是页面2。

这时就可以用替换路来实现了。

在页面2点击按钮，跳转到页面3的时候，实际上是页面3替换页面2，这时点击返回就是页面1了。

 

import 'package:flutter/material.dart';

void main() {
  final routes = {
    "/":(context) => FirstPage(),
    "/secondPage":(context) => SecondPage(),
    "/thirdPage":(context) => ThirdPage()
  };

  var onGenerateRoute = (RouteSettings setttings) {
    final String name = setttings.name;
    final Function pageContentBuilder = routes[name];

    if (pageContentBuilder != null) {
      if(setttings.arguments != null) {
        final Route route = MaterialPageRoute(
          builder: (context) => pageContentBuilder(context,arguments:setttings.arguments)
        );
        return route;
      }else{
        final Route route = MaterialPageRoute(
          builder: (context) => pageContentBuilder(context)
        );
        return route;
      }
    }
    return null;
  };

  runApp(MaterialApp(
    title: "Navigator",
    initialRoute: "/",
    onGenerateRoute: onGenerateRoute,
  ));
}


class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("第一页")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children : <Widget>[
          RaisedButton(
            child: Text("跳转到下一页"),
            onPressed: () {
              Navigator.of(context).pushNamed("/secondPage");
            },
          )
        ]
      ),
    );
  }
}


class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("第二页")),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children : <Widget>[
            RaisedButton(
              child: Text("跳转到下一页"),
              onPressed: () {
                Navigator.of(context).pushReplacementNamed("/thirdPage");  // 替换路由
              },
            ),
            RaisedButton(
              child: Text("返回到第一页"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ]
      ),
    );
  }
}


class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("第三页")),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children : <Widget>[
            RaisedButton(
              child: Text("返回到第一页"),
              onPressed: () {
                Navigator.of(context).pop();  // 因为替换了路由的原因，直接pop()就可以了
              },
            )
          ]
      ),
    );
  }
}

 

• 返回到根路由

比如我们从用户中心跳转到 registerFirst 页面，

然后从 registerFirst 页面跳转到 registerSecond页面，

然后从 registerSecond 跳转到了 registerThird 页面。

这个时候我们想的是 registerThird注册成功后返回到用户中心。

这个时候就用到了返回到根路由的方法。

 

import 'package:flutter/material.dart';

void main() {
  final routes = {
    "/":(context) => HomePage(),
    "/firstPage":(context) => FirstPage(),
    "/secondPage":(context) => SecondPage(),
    "/thirdPage":(context) => ThirdPage()
  };

  runApp(MaterialApp(
    title: "Navigator",
    initialRoute: "/",
    routes: routes,
  ));
}


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("首页")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children : <Widget>[
          RaisedButton(
            child: Text("注册"),
            onPressed: () {
              Navigator.of(context).pushNamed("/firstPage");
            },
          )
        ]
      ),
    );
  }
}


class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("注册-第一步")),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children : <Widget>[
            Text("请填入手机号码"),
            RaisedButton(
              child: Text("下一步"),
              onPressed: () {
                Navigator.of(context).pushNamed("/secondPage");
              },
            ),
          ]
      ),
    );
  }
}


class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("注册-第二步")),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children : <Widget>[
            Text("请输入手机验证码"),
            RaisedButton(
              child: Text("下一步"),
              onPressed: () {
                Navigator.of(context).pushNamed("/thirdPage");
              },
            )
          ]
      ),
    );
  }
}



class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("注册-第三步")),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children : <Widget>[
            Text("请输入密码并确认"),
            RaisedButton(
              child: Text("完成"),
              onPressed: () {
                Navigator.of(context).pushAndRemoveUntil(
                    MaterialPageRoute(
                      builder: (context) => HomePage()), (route) => route == null);
              },
            )
          ]
      ),
    );
  }
}