Flutter-路由导航

修改MaterialApp中的代码

return MaterialApp(
  title: Strings.home_title,
  theme: ThemeData(
    primaryColor: Colors.red
  ),
  routes: {
    "/" : (ctx)=> HomePage(),
    "/material" : (ctx) => MaterialsPutInPage(),
  },
  //home: HomePage(),
  initialRoute: "/",
);

修改跳转的代码

  void _jumpToNextPage(BuildContext context){
    // Navigator.of(context).push(MaterialPageRoute(builder: (ctx){
    //   return MaterialsPutInPage();
    // }));
    Navigator.of(context).pushNamed("/material");
  }

在开发中，为了让每个页面对应的routeName统一，我们通常会在每个页面中定义一个路由的常量来使用

class AboutPage extends StatelessWidget {
  static const String routeName = "/about";
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class MaterialsPutInPage extends StatefulWidget {
  static const String routeName = "/materials/putin";
  @override
  _MaterialsPutInPageState createState() => _MaterialsPutInPageState();
}

修改MaterialApp中routes的key

return MaterialApp(
  title: Strings.home_title,
  theme: ThemeData(
    primaryColor: Colors.red
  ),
  routes: {
    HomePage.routeName : (ctx)=> HomePage(),
    MaterialsPutInPage.routeName : (ctx) => MaterialsPutInPage(),
    AboutPage.routeName : (ctx) => AboutPage()
  },
  //home: HomePage(),
  initialRoute: HomePage.routeName,
);

修改跳转代码

Navigator.of(context).pushNamed(MaterialsPutInPage.routeName);

pushName时，传递参数

 Navigator.of(context).pushNamed(MaterialsPutInPage.routeName,arguments: "a home message");

详情页中获取参数
在build方法中ModalRoute.of(context)可以获取到传递的参数

//1.获取数据
    final message = ModalRoute.of(context).settings.arguments;

接收返回值

  void _jumpToNextPage(BuildContext context){
     //1.跳转代码
    var future = Navigator.of(context).pushNamed(MaterialsPutInPage.routeName,arguments: "a home message");
    //2.获取结果
    future.then((value) => print(value));
  }

//返回时传递参数
Navigator.of(context).pop("返回值");

假设我们有一个页面AboutPage，也希望在跳转时，传入对应的参数message，并且已经有一个对应的构造方法
AboutPage代码

class HYAboutPage extends StatelessWidget {
  staticconstString routeName = "/about";
  finalString message;

  HYAboutPage(this.message);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("关于页面"),
      ),
      body: Center(
        child: Text(message, style: TextStyle(fontSize: 30, color: Colors.red),),
      ),
    );
  }
}

首页跳转代码

RaisedButton(
  child: Text("打开关于页"),
  onPressed: () {
    Navigator.of(context).pushNamed(HYAboutPage.routeName, arguments: "a home message");
  },
)

此时如果继续使用routes中的映射关系，就不好进行配置了，因为AboutPage要求必须传入一个参数
这个时候我们可以使用onGenerateRoute的钩子函数：

onGenerateRoute: (settings) {
  if (settings.name == "/about") {
    return MaterialPageRoute(
      builder: (ctx) {
        return HYAboutPage(settings.arguments);
      }
    );
  }
  returnnull;
},

如果我们打开的一个路由名称是根本不存在的，这个时候我们希望跳转到一个统一的错误页面。

RaisedButton(
  child: Text("打开未知页面"),
  onPressed: () {
    Navigator.of(context).pushNamed("/abc");
  },
)

class UnknownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("错误页面"),
      ),
      body: Container(
        child: Center(
          child: Text("页面跳转错误"),
        ),
      ),
    );
  }
}

onUnknownRoute: (settings) {
  return MaterialPageRoute(
    builder: (ctx) {
      return UnknownPage();
    }
  );
},

Navigator.of(context).pop();
Navigator.of(context).popAndPushNamed(routeName);
Navigator.of(context).popUntil((route) => false);
Navigator.of(context).pushNamed(routeName);
Navigator.of(context).pushReplacementNamed(routeName);
Navigator.of(context).pushNamedAndRemoveUntil(newRouteName, (route) => false);