Flutter学习------路由

路由使用方式

1、简单路由

示例 无参路由

 Navigator.push(context,
       MaterialPageRoute(builder: (context) {
       return SearchScreen();//这里是要跳转的界面地址
       }));

示例 有参路由

 Navigator.push(context,
           MaterialPageRoute(builder: (context) {
            return SearchScreen(name:'参数');
           }));
		//SearchScreen界面获取传过来的参数值
		${this.widget.name}

示例 带参返回路由

  Navigator.pop(context,'返回去的参数')
  //接收页面取值方式
 var result =  Navigator.push(context,
        MaterialPageRoute(builder: (context) {
        return SearchScreen();
       }));
 result.then((value) => print('这里是返回的参数${value}'));

2、命名路由

示例

 return MaterialApp(
      title: '我的第一个flutter',
      routes: {
        '/home':(context)=> HomeScreen(),
        '/A':(context)=> A(),
        '/B':(context)=> B(),
        '/C':(context)=> C(),
      },
      home: const HomePage(),
    );
//调用方式
   Navigator.pushNamed(context, '/A');
//传参方式
   Navigator.pushNamed(context, '/A',arguments: 'canshu');
   //获取参数方式
   var param = ModalRoute.of(context)?.settings.arguments;

初始化路由 initialRoute: ‘/A’,

3、路由钩子

MaterialApp按照如下的规则匹配路由:

  1. 路由为/,home不为null则使用home.
  2. 使用routes指定的路由。
  3. 使用onGenerateRoute生产的路由,处理除home和routes以为的路由.
  4. 如果上面都不匹配则调用onUnknownRoute.
  return MaterialApp(
      routes: {
        '/home':(context)=> HomeScreen(),
        '/A':(context)=> A(),
        '/B':(context)=> B(),
        '/C':(context)=> C(),
      },
      initialRoute: '/A',
      onGenerateRoute: (RouteSettings settings){
        if(settings.name == '/A'){
          return MaterialPageRoute(builder: (context) => A());
        }
      },
      //如果上面的页面都没有走这里
      onUnknownRoute: (RouteSettings settings){
        return MaterialPageRoute(builder: (context) => 错误界面());
      },
      home: const HomePage(),
    );

你可能感兴趣的:(Flutter,flutter,学习,数学建模)