flutter Navigator跳转

在flutter中我们要打开新的一个页面需要使用Navigator这个类,相当于startActivity。要知道activiy要进行跳转是要在注册文件(AndroidManifest.xml)中注册,而在flutter中也是一样要注册。
在flutter入口main函数中,调用的runApp初始化时进行路由注册。

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/": (context) => MyHomePage(title: 'Is Flutter Demo Page'),
        "/jumpFirst": (context) => JumpFirstPage(),
        "/jumpSecond": (context) => JumpSecondPage(),
      },
    );
  }
}

在路由注册中"/"代表的是我们的第一个启动的页面,相当于Android注册文件中的
我们要跳转到新的页面时,直接使用

Navigator.pushNamed(context, "/jumpFirst");

pushNamed中的第二个参数就是我们自己注册的句柄

跳转携带参数

1、静态携带参数,直接在路由中写死
"/": (context) => MyHomePage(title: 'Is Flutter Demo Page'),
2、通过路由配置,携带参数。在Navigator跳转中有个一个Object arguments参数,通过这个参数可以传递我们需要的数据。

 @optionalTypeArgs
  static Future pushNamed(
    BuildContext context,
    String routeName, {
    Object arguments,
   }) {
    return Navigator.of(context).pushNamed(routeName, arguments: arguments);
  }

页面通过arguments获取携带的参数
Navigator.pushNamed(context, "/jumpSecond",arguments:{"paramName":"paramValue"});

配置统一路由出口

1、创建统一路由注册配置文件

class Routes {
  static final routerMapConfig = {
    "/": (context, {arguments}) => MyHomePage(title: 'Is Flutter Demo Page'),
    "/jumpFirst": (context, {arguments}) => JumpFirstPage(),
    "/jumpSecond": (context, {arguments}) => JumpSecondPage(arguments:arguments),
  };

  // ignore: top_level_function_literal_block
  static final onGenerateRoute = (RouteSettings settings) {
    var pageBuilder = routerMapConfig[settings.name];
    if (pageBuilder != null) {
      if (settings.arguments != null) {
        return MaterialPageRoute(
            builder: (context) =>
                pageBuilder(context, arguments: settings.arguments));
      } else {
        return MaterialPageRoute(builder: (context) => pageBuilder(context));
      }
    }
    throw new Exception("路由["+settings.name+"]页面没有注册,请先注册");
  };
}

2、在入口main配置路由,onGenerateRoute路由配置,initialRoute是默认启动的路由。

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: "/",
      onGenerateRoute: Routes.onGenerateRoute,
    );
  }

3、在页面获取参数

class JumpSecondPage extends StatefulWidget {
  final Map arguments;
  final Key key;

  JumpSecondPage({this.key,this.arguments}):super(key: key);

  @override
  _JumpSecondPageState createState() => _JumpSecondPageState(arguments: arguments);
}

class _JumpSecondPageState extends State {

  final Map arguments;

  _JumpSecondPageState({this.arguments}){
    if(arguments == null){
      print("没有携带参数过来");
    }else{
      print("传递过来的参数    "+arguments["paramName"]);
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text("跳转的第二个页面"),),
      body: Center(
        child: GestureDetector(
          child: Text("最后一个页面要结束"),
          onTap: (){
            //TODO click operation
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

返回数据给上一个页面

1、在pop中直接添加要返回的数据
Navigator.pop(context,"返回给上一个页面的数据");
2、接收的页面使用then接收返回的数据,then相当于onActivityForResult

 Navigator.of(context).pushReplacementNamed("/jumpSecond",
                arguments: {
                  "name": "参数内容"
                }).then((value) => print("返回的数据=" + value));

你可能感兴趣的:(flutter Navigator跳转)