Flutter 知识点（路由与导航）

ruanjiandu

已于 2022-03-04 16:33:26 修改

阅读量2k

点赞数 1

文章标签： flutter android webview

于 2022-03-04 16:17:35 首次发布

本文链接：https://blog.youkuaiyun.com/ruanjiandu/article/details/123278714

版权

本文详细介绍了Flutter中的动态路由和静态路由的使用方法，包括页面跳转、参数传递和返回参数的处理。同时展示了在MaterialApp中设置静态路由的示例代码，以及如何通过Navigator进行页面间的导航和数据交互。对于开发者理解和掌握Flutter应用的路由管理具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 动态路由

跳转页面代码

 Navigator.push<void>(
      context,
      MaterialPageRoute<void>(
        builder: (BuildContext context) => HomePageB(),
      ),
    );

返回页面代码

    Navigator.pop(context);

跳转页面传参数，通过构造方法传参

 Navigator.push(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) => HomePageB(
          htitle: "pageB",
        ),
      ),
    ).then((value){
      print(value);
    });

回调参数

    Navigator.pop(context,"get it");

2 静态路由在MaterialApp 内设置路由

 return MaterialApp(
      title: "路由导航学习",
      theme:
          ThemeData(primarySwatch: Colors.blue, backgroundColor: Colors.white),
      home: HomePage(htitle: "pageA"),
      routes: {
        "/home":(context) => HomePage(htitle: "pageA"), 
        "/pageb":(context) => HomePageB(htitle: "pageB")
      },
      onGenerateRoute: (RouteSettings settings){
        print(settings.name);
        return null;
      },
      onUnknownRoute: (RouteSettings settings){//未找到跳转页面时跳转
        return MaterialPageRoute(builder: (BuildContext context) => 
      HomePageB(htitle: "404"));
      },
    );

跳转页面

Navigator.pushNamed(context, "/pageb",arguments: "title").then((value) => print(value));

接收参数

    var title = ModalRoute.of(context)?.settings.arguments;

回调参数

    Navigator.pop(context,"get it");