美文网首页
Flutter页面跳转

Flutter页面跳转

作者: 江湖闹士 | 来源:发表于2023-02-25 21:41 被阅读0次

    flutter页面跳转分为以下几种情况
    1、普通跳转
    2、通过路由跳转
    ---2.1、跳转的类构造函数不带参数
    ---2.2、跳转的类构造函数带参数

    1、普通跳转(传递参数:通过构造器直接传递即可)

    //导航到新路由
      void _jumpAboutPage(BuildContext context) {
    //第一种写法:
        Navigator.of(context).push(
            MaterialPageRoute(
                builder: (ctx) {
                   //不携带参数
                  return NewRoute();
                   //携带参数(例如带一个字符串参数)
                  //return NewRoute("abc");
                }
            )
        );
      }
       
    void _jumpAboutPage(BuildContext context) {
    //第二种写法:
      Navigator.push( 
        context,
        MaterialPageRoute(builder: (context) {
            //不携带参数
            return NewRoute();
            //携带参数(例如带一个字符串参数)
            //return NewRoute("abc");
        }),
      );
    }
    

    2、路由方式

    1、构造函数不带参数

    例如跳转到如下页面:

    import 'package:flutter/material.dart';
    
    class NewRouter extends StatelessWidget {
        //设置该页面路由名称字符串常量
      static const routeName = "/newRouter";
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("新页面"),
          ),
          body: Center(
            child: Text(_content),
          ),
        );
      }
    }
    

    那么router注册在入口Widget -> MaterialApp的routes属性里

    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          //关键代码在这里,注册路由
          routes: {
            NewRouter.routeName : (cts) => NewRouter()
          },
          //可以通过这种路由方式设置APP首次进入的页面
          initialRoute: NewRouter.routeName,
        );
      }
    }
    
    //跳转地方的代码
    void _jumpAboutPage(BuildContext context) {
        Navigator.pushNamed(context, NewRouter.routeName);
     }
    

    注意:虽然构造函数中没有带参数,但是我们通过上面的方式跳转页面的时候仍然可以携带值
    方法是:
    Navigator.pushNamed(context, NewRouter.routeName,arguments: "携带的参数,这里是String,可以传Object类型");
    跳转页获取数据的方式:在build方法中通过下面方法获取
    String _content = ModalRoute.of(context)?.settings.arguments as String;

    2、构造函数带参数

    例如跳转到如下页面:

    import 'package:flutter/material.dart';
    
    class NewRouter extends StatelessWidget {
        //设置该页面路由名称字符串常量
      static const routeName = "/newRouter";
    
      String _content;
    
      //构造函数带参数
      NewRouter(this._content);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("新页面"),
          ),
          body: Center(
            child: Text(_content),
          ),
        );
      }
    }
    

    那么router注册在入口Widget -> MaterialApp的onGenerateRoute属性里(原理:这里是一个钩子,当我们使用的路由在router属性中没有注册,则会在onGenerateRoute里查找)

    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          //  在这里设置带参构造函数的路由
          onGenerateRoute: (settings) {
            if (settings.name == NewRouter.routeName) {
              return MaterialPageRoute(
                  builder: (ctx) {
                  //这里是传送携带的参数,这里是传String,所以转String了
                    return NewRouter(settings.arguments as String);
                  }
              );
            }
            return null;
          },
        );
      }
    }
    
    //跳转地方的代码
    void _jumpAboutPage(BuildContext context) {
        Navigator.pushNamed(context, NewRouter.routeName,arguments: "携带的参数,这里是String,可以传Object类型");
     }
    

    总结:
    1、跳转分普通跳转和路由跳转
    2、普通跳转通过构造方法参数传值
    3、路由跳转方式,根据构造方法是否有参数要区分是在routes属性(不带参数)中注册还是onGenerateRoute属性(带参数)中处理
    4、跳转的方法都是Navigator.pushNamed(context, NewRouter.routeName,arguments: "携带的参数,这里是String,可以传Object类型");不传值的话就去掉arguments:
    5、接收传值的方式,要么是通过构造方法传过来的,要么就是通过String _content = ModalRoute.of(context)?.settings.arguments as String;获取
    6、页面返回都是通过Navigator.of(context).pop();可在pop()括号中添加返回页面时需要携带的数据

    相关文章

      网友评论

          本文标题:Flutter页面跳转

          本文链接:https://www.haomeiwen.com/subject/glofldtx.html