Flutter页面之间的跳转，普通路由、普通路由传值、 命名路由、命名路由传值

1.路由介绍

Flutter中的页面跳转也就是路由，Flutter中通过Navigator组件来管理路由导航，提供了堆栈管理。

Flutter中给我们提供了两种配置路由跳转的方式：基本路由和命名路由

2.基本路由得使用

1）基本路由的使用

  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) {
                        return One();//跳转的目标页面
                      },
                    ),
                  );

2）基本路由可以传值的的实现

RaisedButton(
                onPressed: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (context) {
                    return TwoPage(
                      content: "我是传过来的值",
                    );//跳转到目标页面并且带有要传递的参数
                  }));
                },
                child: Text("路由传值"),
              ),

//目标页面接收参数
class TwoPage extends StatefulWidget {
  String content;
  //定义名命构造函数
  TwoPage({Key key,this.content,}) : super(key: key);

  @override
  _TwoPageState createState() => _TwoPageState();
}

class _TwoPageState extends State<TwoPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("路由传值"),
        ),
        body: Center(child: Text("${widget.content}"),),//接收到的参数
      ),
    );
  }
}

3.名命路由

1）配置路由

final routes = {
//不需要传值的
  '/three': (context) => Three(),
//需要传值
  '/four': (context, {arguments}) => Four(arguments: arguments),

  '/five': (context, {arguments}) => Five(arguments: arguments),
};

// routes是一个Map，通过下面方法遍历需要跳转的页面，然后通过基本路由进行跳转
var onGenerateRoute = (RouteSettings settings) {
  
  final String name = settings.name;
  final Function pageContentBuilder = 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 _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(750, 1334),
      allowFontScaling: false,
      builder: () => MaterialApp(
        title: "Myapp",
        debugShowCheckedModeBanner: false,
       
        initialRoute: "/",
        //配置路由
        onGenerateRoute: onGenerateRoute,
        theme: ThemeData(primaryColor: Colors.white),
      ),
    );

    
  }

2）名命路由使用

 RaisedButton(
                onPressed: () {
                  Navigator.pushNamed(context, "/three"); // /three 跳转的目标路由
                },
                child: Text("名命路由"),
              ),

3）命名路由传值的使用方法

扫描二维码关注公众号，回复： 16855847 查看本文章

 RaisedButton(
                onPressed: () {
                  Navigator.pushNamed(context, "/four",arguments: {"content":"我是名命路由传值"});//通过arguments进行传值
                },
                child: Text("命名路由传值"),
              ),
//目标页面
class Four extends StatefulWidget {
  var arguments;
  Four({Key key, this.arguments}) : super(key: key);

  @override
  _FourState createState() => _FourState();
}

class _FourState extends State<Four> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("命名路由传值"),
        ),
        body: Text("${widget.arguments["content"]}"),
      ),
    );
  }
}

4）值回传

RaisedButton(
                onPressed: () async {
                  var result = await Navigator.pushNamed(context, "/five");
                  print(result);//获取从目标页面传回来的数据
                },
                child: Text("值回传"),
              ),

//目标页面
class Five extends StatefulWidget {
  var arguments;
  Five({Key key,this.arguments}) : super(key: key);

  @override
  _FiveState createState() => _FiveState();
}

class _FiveState extends State<Five> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("值回传"),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              Navigator.pop(context,"我是值回传");//通过这个方法吧把数据传回上个页面
            },
            child: Text("值回传"),
          ),
        ),
      ),
    );
  }
}