Flutter路由返回/替换/返回根路由

再来分享一篇关于路由的姿势，前面两篇说的是由一个页面跳转另一个页面，这篇说说跳转页面之后如何往回跳（当然了，一般跳转页面后页面标题左面都会有一个箭头可以返回上一页，这个就不做讨论了），前面两篇文章已经附上了管理路由的代码，这里就简写了，只贴实现功能的部分代码

先把入口文件和管理路由配置好，后面直接往上面添加就可以

//main.dart
import 'package:flutter/material.dart';
import 'routes/Routes.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",
      onGenerateRoute: onGenerateRoute
    );
  }
}

//Routes.dart管理路由
import 'package:flutter/material.dart';
import '../pages/Search.dart';
import '../pages/user/Register.dart';
import '../pages/user/Continue.dart';
import '../pages/user/Finish.dart';

final routes = {
  "/" :(context) => HomeContent(),
  "/search" : (context) => SearchPage(),
};

var onGenerateRoute = (RouteSettings settings) {
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context, arguments: settings.arguments)
      );
      return route;
    } else {
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context)
      );
      return route;
    }
  }
};

1、返回上一页：从首页跳转到搜索页→再跳回首页 

//Home.dart
import 'package:flutter/material.dart';
import '../Search.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("首页"),
      ) ,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
              child: Text("跳转到搜索页面"),
              onPressed: () {
                //普通路由跳转
                Navigator.pushNamed(context, "/search");
              },
              color: Theme.of(context).accentColor,
              textTheme: ButtonTextTheme.primary
          ),
          SizedBox(height: 20),
        ],
      )
    );
  }
}

//Search.dart
import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  const SearchPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("搜索页面"),
      ) ,
      body: RaisedButton(
          child: Text("跳回首页"),
          onPressed: () {
            Navigator.of(context).pop();   //pop()方法返回上一页
          },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary
      ),
    );
  }
}

2、替换路由：例：这里面可以实现一个注册的功能，由一个页面点击按钮到第一个注册页面填写手机号，再点击按钮跳转到下一个注册页面输入验证码，最后点击按钮回到最初的页面

//Setting.dart
import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
  SettingPage({Key key}) : super(key: key);
  _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("设置"),
      ) ,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
              child: Text("跳转到注册页面"),
              onPressed: () {
                Navigator.pushNamed(context, "/register");
              },
              color: Theme.of(context).accentColor,
              textTheme: ButtonTextTheme.primary
          )
        ],
      )
    );
  }
}

//Register.dart
import 'package:flutter/material.dart';

class RegisterFirstPage extends StatelessWidget {
  const RegisterFirstPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第一步")
      ),
      body:Column(
        children: <Widget>[
          Text("注册第一步,请输入您的手机号,然后点击下一步"),
          RaisedButton(
            child: Text('下一步'),
            onPressed: (){
              //替换路由
              Navigator.of(context).pushReplacementNamed('/continue');
            },
          )
        ],
      )
    );
  }
}

//Continue.dart
import 'package:flutter/material.dart';

class RegisterSecondPage extends StatelessWidget {
  const RegisterSecondPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第二步")
      ),body:Column(
        children: <Widget>[
          SizedBox(height: 40),
          Text("输入验证码"),
          SizedBox(height: 40),
          RaisedButton(
            child: Text('下一步'),
            onPressed: (){
              Navigator.of(context).pop();
            },
          )
        ],
      )
    );
  }
}

3、返回根路由：例：这里模拟一个注册成功的操作，当注册成功后返回到最开始的页面

//Setting.dart、Register.dart代码和上面一样，不贴了
//Continue.dart
import 'package:flutter/material.dart';

class RegisterSecondPage extends StatelessWidget {
  const RegisterSecondPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第二步")
      ),body:Column(
        children: <Widget>[
          Text("输入验证码"),
          RaisedButton(
            child: Text('下一步'),
            onPressed: (){
              //替换路由
              Navigator.of(context).pushReplacementNamed('/finish');
            },
          )
        ],
      )
    );
  }
}

//Finish.dart
import 'package:flutter/material.dart';
import '../Tabs.dart';

class RegisterThirdPage extends StatelessWidget {
  const RegisterThirdPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第三步")
      ),body:Column(
        children: <Widget>[
          Text("输入密码完成注册"),
          RaisedButton(
            child: Text('确定'),
            onPressed: (){
              //返回根路由
              Navigator.of(context).pushAndRemoveUntil(
                //这里面传一个值给Tab页面，从哪个页面跳过来，最后还跳回到哪个页面，这里的1指的就是Setting.dart页面
                new MaterialPageRoute(builder: (context) => new HomeContent(index : 1)),
                 (route) => route == null
              );
            },
          )
        ],
      )
    );
  }
}

//Tab.dart，当然有人传值就得有人接收这个参数
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
import 'tabs/MySelf.dart';

class HomeContent extends StatefulWidget {
  //这里定义常量来接收跳回根路由页面传的index值，默认让它处于第一页
  final index;
  HomeContent({Key key, this.index = 0}) : super(key : key);
  _HomePageState createState() => _HomePageState(this.index);
}

class _HomePageState extends State<HomeContent> {
  int _currentIndex;
  _HomePageState (index) {
    this._currentIndex = index;
  }
  List _pageList = [
    HomePage(),
    SettingPage(),
    CategoryPage(),
    MyselfPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index){
          setState(() {
            this._currentIndex = index;
          });
        },
        iconSize: 45.0,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.person_outline),
              title: Text("我")
          )
        ],
      ),
    );
  }
}

最后贴一个目录结构