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);
              },
            )
          ]
      ),
    );
  }
}