Flutter 路由管理

创建命名路由配置文件

$filename('route.dart')
final Map routes = {
  '/home': (context) => const HomeWidget(),
  '/signUp': (context) => const SignUp(),
  '/signIn': (context) => const SignIn(),
  ...
};

// 使用
$filename(main.dart)
...
@override
Widget build(BuildContext context) {
  return MaterialApp(
    routes: {...routes},
    home: ifWidget(context),
  );
}
...

路由跳转

push 将设置的router信息推送到Navigator上，实现页面跳转

Navigator.of(context).push(
  MaterailPageRoute(builder:(context){
  	return HomeWidget();
  }
));
// 或
Navigator.push(
 context,
  MaterailPageRoute(
    builder: (context) => const SignUp()
  )
);

pop 导航到新页面，或者返回到上个页面

Navigator.pop(context);

canPop 判断是否可以导航到新页面

Navigator.canPop(context);

maybePop 可能会导航到新页面

Navigator.of(context).maybePop();

popAndPushNamed 指定一个路由路径，并导航到新页面

Navigator.popAndPushNamed(context, '/signIn');

popUntil 反复执行pop 直到该函数的参数predicate返回true为止(一直 pop 到指定的页面)

Navigator.popUntil(context, ModalRoute.withName('/signIn'));

pushAndRemoveUntil 将给定路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => const SignIn()),
  (route) => route == null,
);

pushNamed 将命名路由推送到Navigator

Navigator.pushNamed(context, '/signIn');

pushNamedAndRemoveUntil 将命名路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止

Navigator.pushNamedAndRemoveUntil(context, '/signIn', ModalRoute.withName('/signUp'));

pushReplacementNamed 这个也是替换路由操作。推送一个命名路由到Navigator，新路由完成动画之后处理上一个路由

Navigator.pushReplacementNamed(context, '/signIn');

removeRoute 从Navigator中删除路由，同时执行Route.dispose操作

// 路由栈移除功能,例如可以通过ModalRoute.of(context)获取当前页面路由。
// 如果和Navigator.of(context).pop()做比较的话就是通过该方法可以移除指定路由，只要拿到对应路由对象就能将其在栈中移除。
// 而Navigator.of(context).pop()则只能移除当前路由页面。
Navigator.of(context).removeRoute(ModalRoute.of(context));

removeRouteBelow 从Navigator中删除路由，同时执行Route.dispose操作，要替换的路由是传入参数anchorRouter里面的路由

// 同样是路由栈移除功能，根据输入页面路由移除该锚点路由的上一个页面路由。 例如路由栈为[1,2,3,4],执行removeRouteBelow(3)后路由栈变为[1,3,4]
Navigator.of(context).removeRouteBelow(ModalRoute.of(context));

replace 将Navigator中的路由替换成一个新路由。

Navigator.of(context).replace(
  oldRoute: UserNavigatorObserver.history[UserNavigatorObserver.history.length - 2],
  newRoute: MaterialPageRoute(
    builder: (_) => const SignIn(),
  ),
);

路由传参

以命名路由跳转时

Navigator.of(context).pushNamed(
  "/signIn",
  arguments: {"data": "Hello World!"},
);

以页面跳转时

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => const SignIn(),
    settings: RouteSettings(
      arguments: {"data": "Hello World!"},
    ),
  ),
);

在页面中使用ModalRoute.of(context).settings.arguments接收参数

class SignIn extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SignIn();
}
 
class _SignIn extends State<SignIn> {
  @override
  Widget build(BuildContext context) {
    Map arguments = ModalRoute.of(context).settings.arguments;
    String data = arguments['data'];
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          Text("data: $data"),
        ],
      ),
    );
  }
}

直接使用路由构造方法传参

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) => const SignIn("Hello World!"),
  ),
);

接参

class SignIn extends StatefulWidget {
  final String data;
 
  SignIn(this.data);
 
  @override
  State<StatefulWidget> createState() => _SignIn();
}
 
class _SignIn extends State<SignIn> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text("data: ${widget.data}"),
    );
  }
}

使用pop返回上个页面并传参

Navigator.of(context).pop({"data": "Hello World!"});

---

个人博客：https://www.linmeimei.top/ 欢迎访问

---