Flutter页面跳转

2023-02-25  本文已影响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()括号中添加返回页面时需要携带的数据

上一篇下一篇

猜你喜欢

热点阅读