Flutter学习------路由

最新推荐文章于 2024-04-26 16:48:40 发布

CS-晨曦

最新推荐文章于 2024-04-26 16:48:40 发布

阅读量108

点赞数

分类专栏： Flutter 文章标签： flutter 学习数学建模

本文链接：https://blog.csdn.net/u010689434/article/details/131006615

版权

Flutter 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

路由使用方式

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按照如下的规则匹配路由：

路由为/,home不为null则使用home.
使用routes指定的路由。
使用onGenerateRoute生产的路由，处理除home和routes以为的路由.
如果上面都不匹配则调用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(),
    );