Flutter 路由管理

• Flutter 路由管理
• • 概述
  • 简单路由
  • • 入栈操作
    • 出栈操作
  • 命名路由
  • • 注册路由表
    • 命名路由传参
  • 路由钩子
  • 总结

• 路由在移动开发中通常指页面，在Android中通常指代一个Activity。Flutter中的路由管理与原生开发较类似，路由管理指页面跳转关系。
• 路由入栈(push)操作对应打开一个新页面，出栈(pop)操作对应关闭页面。

• 入栈，即新开一个页面，需要调用Future push(BuildContext context, Route route)
• 出栈，即关闭页面，需要调用pop(BuildContext context, [ T? result ])

入栈操作，传递参数，并接收返回值。

方式一和方式二使用构造函数传参，方式三使用RouteSettings传参。

方式一

onPressed: () async {
    var result = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context) {
            return NewPage("hello world");
        }),
    );
    print("$result");
},

方式二

Navigator.push(context, MaterialPageRoute(builder: (context) {
    return NewPage("hello world");
})).then((value) {
    print("$value");
});

方式三

Navigator.push(
    context,
    MaterialPageRoute(
        builder: (context) {
            return NewPage("hello world");
        },
        settings: RouteSettings(
            name: "params",
            arguments: {
                "name": "小白",
                "age": 18,
                "address": "beijing"
            },
        ))).then((value) {
   			 print("$value");
});

Navigator.pop(context, "hello 返回值");

RouteSettings获取传参

var args = ModalRoute.of(context)?.settings.arguments as Map;

命名路由指有名字的路由，通过给路由起名字，通过路由名直接打开新的页面，便于路由管理。

使用命名路由，必须先注册一个路由表，在MyApp类中添加routes属性。

方式一

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '标题',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //注册路由表
      routes: {
        "/NewPage": (context) {
          return NewPage();
        },
      },
      home: MyHomePage(title: '首页标题'),
    );
  }
}

方式二

首页home路由使用命名路由，需要在routes中注册MyHomePage路由，然后在initialRoute声明初始路由。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '任务栏标题',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/": (context) {
          return MyHomePage(title: '首页标题');
        },
        "NewPage": (context) {
          return NewPage();
        },
      },
      initialRoute: "/",
    );
  }
}

Navigator.pushNamed(context, "NewPage",
                    arguments: {"name": "小明", "age": 18, "address": "beijing"});

在使用命名路由跳转时，如果路由注册表没有注册，这时会调用onGenerateRoute回调。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '任务栏标题',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/": (context) {
          return const MyHomePage(title: '首页标题');
        },
      },
      initialRoute: "/",
      onGenerateRoute: (RouteSettings settings) {
        print("onGenerateRoute ${settings.name}");
        if (settings.name == "NewPage") {
          return MaterialPageRoute(builder: (context) {
            return NewPage();
          });
        }
      },
    );
  }
}

推荐使用命名路由，理由如下：

1. 语义化描述更清晰。
2. 方便代码维护。
3. 可以使用onGenerateRoute回调。