Flutter--Route和Navigator（一）

一、介绍

Flutter中的路由(Route)通俗的桨就是页面跳转，类似android的activity跳转，在Flutter中通过导航器（Navigator）组件管理路由导航。并且提供了管理堆栈的方法。如：Navigator.push和Navigator.pop。

Flutter提供了两种配置路由跳转的方式
1、基本路由（静态路由）
2、命名路由（动态路由）

二、基本路由

1、不传值跳转

//固定写法（两种写法，任何一种都行），MyPageA为跳转的目标
Navigator.of(context).push(MaterialPageRoute(builder: (context) => MyPageA()));
Navigator.push(context, MaterialPageRoute(builder: (context)=>MyPageA()));
//销毁当前页面（两种写法，任何一种都行）
Navigator.pop(context)
Navigator.of(context).pop()

2、传值跳转

//跳转目标MyPageB并传值
Navigator.push(context,MaterialPageRoute(builder: (context) => MyPageB(msg: "我是传递过来的值",)));

//MyPageB定义参数，并重写构造方法
String msg;
  MyPageB({this.msg="默认值"});

三、基本路由的demo

import 'package:flutter/material.dart';
import 'MyPageA.dart';
import 'MyPageB.dart';

/**
 * 首页
 */
void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("页面跳转"),
      ),
      body: Container(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                child: Text("静态跳转不传值"),
                onPressed: () {
//            Navigator.of(context).push(MaterialPageRoute(builder: (context)=>MyPageA()));
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => MyPageA()));
                },
              ),
              RaisedButton(
                child: Text("静态跳转传值"),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => MyPageB(msg: "我是传递过来的值",)));
                },
              ),
            ],
          )
//
          ),
    );
  }
}

MyPageA

import 'package:flutter/material.dart';

/**
 * 不传值的目标页面MyPageA
 */
class MyPageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
       Scaffold(
          appBar: AppBar(
            title: Text("我是页面A"),
          ),
          body: Container(
            alignment: Alignment.center,
            child: RaisedButton(
              child: Text("返回上层"),
              onPressed: (){
                //销毁当天页面
                Navigator.pop(context);
              },
            ),
          ),
    );
  }
}

MyPageB

import 'package:flutter/material.dart';

/**
 * 传值的目标页面MyPageB
 */
class MyPageB extends StatelessWidget {
  String msg;
  MyPageB({this.msg="默认值"});
  @override
  Widget build(BuildContext context) {
    return
       Scaffold(
          appBar: AppBar(
            title: Text("我是页面B"),
          ),
          body: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(msg),
                RaisedButton(
                  child: Text("返回上层"),
                  onPressed: (){
                    //销毁当天页面
                    Navigator.pop(context);
                  },
                ),
              ],
            )
          ),
    );
  }
}

5dcd9aec0494449859cf11ae432a72d.png 264ea79e674f736d1a29da08f2d7be6.png
eed07cb2457b7b85d9388fc6505eaa5.png

四、命名路由

1、不传值跳转

//在MaterialApp根目录添加
return MaterialApp(
      routes: {
        '/pageA': (content) => MyPageA(),
      },
      home: RouteStudy(),

    );

//跳转的时候直接调用
Navigator.pushNamed(context, '/pageA');

2、传值跳转

A、配置路由参数

final routes = {
    '/pageA': (content) => MyPageA(),//不传值
    '/pageC': (content,{arguments}) => MyPageC(arguments:arguments)//传值

  };

B、MaterialApp根目录配置路由监听

onGenerateRoute: (RouteSettings settings) {
        //统一处理
        final String name = settings.name;
        final Function pageContentBuilder = this.routes[name];
        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
                builder: (context) =>
                    pageContentBuilder(context, arguments: settings.arguments));
            return route;
          } else {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context));
            return route;
          }
        }
      },

C、跳转的时候调用

Navigator.pushNamed(context, "/pageC",arguments: {
                "name":"随便写点",
              });

D、目标页面接收参数

class MyPageC extends StatelessWidget {
  final arguments;
  MyPageC({this.arguments});
  @override
  Widget build(BuildContext context) {
    return null;

  }
}

五、命名路由的demo

void main() {
  runApp(MyAPP());
}

class MyAPP extends StatelessWidget {
  final routes = {
    '/pageA': (content) => MyPageA(),
    '/pageC': (content,{arguments}) => MyPageC(arguments:arguments)

  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RouteStudy(),
      // ignore: missing_return
      onGenerateRoute: (RouteSettings settings) {
        //统一处理
        final String name = settings.name;
        final Function pageContentBuilder = this.routes[name];
        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
                builder: (context) =>
                    pageContentBuilder(context, arguments: settings.arguments));
            return route;
          } else {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context));
            return route;
          }
        }
      },
    );
  }
}

class RouteStudy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("命名路由跳转"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RaisedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/pageA');
            },
            child: Text("命名路由不传值"),
          ),
          RaisedButton(
            onPressed: () {
              Navigator.pushNamed(context, "/pageC",arguments: {
                "name":"随便写点",
              });
            },
            child: Text("命名路由传值"),
          )
        ],
      ),
    );
  }
}

MyPageA

/**
 * 不传值的目标页面
 */
class MyPageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
       Scaffold(
          appBar: AppBar(
            title: Text("我是页面A"),
          ),
          body: Container(
            alignment: Alignment.center,
            child: RaisedButton(
              child: Text("返回上层"),
              onPressed: (){
                //销毁当天页面
                Navigator.pop(context);
              },
            ),
          ),
    );
  }
}

MyPageC

/**
 * 传值的目标页面MyPageC
 */
class MyPageC extends StatelessWidget {
  final arguments;
  MyPageC({this.arguments});
  @override
  Widget build(BuildContext context) {
    return
       Scaffold(
          appBar: AppBar(
            title: Text("我是页面C"),
          ),
          body: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(arguments["name"]),
                RaisedButton(
                  child: Text("返回上层"),
                  onPressed: (){
                    //销毁当天页面
//                    Navigator.pop(context);
                  Navigator.of(context).pop();
                  },
                ),
              ],
            )
          ),
    );
  }
}

da7c6558d1d06f6e337ca7164d98ac0.png c26b113e73dc480e4746a87755f1f92.png 4fb7d790fc46105b5e4fd3a2af00be4.png