Future push(BuildContext context, Route route)
pop(BuildContext context, [ T? result ])
push
和pop
进行页面的跳转。Navigator.push(
context,
MaterialPageRoute(builder: (context) => NewPage()),
);
Navigator.pop(context);
maybePop
方法只会在路由堆栈有可弹路由时才会出栈。
Navigator.maybePop(context);
canPop
方法可以判断当前路由堆栈是否可以出栈。
if (Navigator.canPop(context)) {
Navigator.pop(context);
}
pushReplacement
方法可以用于切换路由页面。
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => NewPage()),
);
进入新页面并之前所有页面。
Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (BuildContext context) {
return FourthPage();
}), (route) => false);
命名路由指有名字的路由,通过给路由起名字,通过路由名直接打开新的页面,便于路由管理。
pushNamed
是命名路由的方式。MaterialApp
中配置路由名称。使用命名路由,必须先注册一个路由表,在MyApp类中添加routes
属性。
方式一
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
"/NewPage": (context) {
return NewPage();
},
},
home: MyHomePage(title: '首页标题'),
);
}
}
方式二
首页home路由使用命名路由,需要在routes
中注册MyHomePage路由,然后在initialRoute
声明初始路由。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
"/": (context) {
return MyHomePage(title: '首页标题');
},
"NewPage": (context) {
return NewPage();
},
},
initialRoute: "/",
);
}
}
Navigator.pushNamed(context, "/first_page");
pushReplacementNamed
方法可以用于切换路由页面,退出当前页面,并切换至新页面。
Navigator.pushReplacementNamed(context, "/second_page");
popAndPushNamed
方法与pushReplacementNamed
方法的功能基本一致,唯一的区别是会有页面退出的动画。
Navigator.popAndPushNamed(context, "/second_page");
进入新页面,并删除路由栈堆直到/first_page
页面,当新页面退出时,会显示/first_page
页面。
Navigator.pushNamedAndRemoveUntil(context, "/fourth_page", ModalRoute.withName('/first_page'));
出栈到指定页面。
Navigator.popUntil(context, ModalRoute.withName('/first_page'));
第一个页面
//跳转
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return SecondPage("hello world");
}),
);
第二个页面
class SecondPage extends StatelessWidget {
String title;
SecondPage(this.title);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
);
}
}
arguments
传递参数。 ModalRoute.of(context)!.settings.arguments
获取参数。第一个页面
Navigator.pushNamed(context, "/second_page", arguments: {"name": "小明", "age": 18, "address": "beijing"});
第二个页面
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var arguments = ModalRoute.of(context)!.settings.arguments as Map?;
print(arguments);
return Scaffold(
appBar: AppBar(
title: Text("第二个页面"),
),
body: Text("姓名:${arguments!["name"]} 年龄:${arguments["age"]} 地址:${arguments["address"]} "),
);
}
}
第一个页面
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return SecondPage();
},
settings: const RouteSettings(
name: "params",
arguments: {"name": "小明", "age": 18, "address": "beijing"},
),
),
);
第二个页面
var route = ModalRoute.of(context);
Map? _arguments;
if (route != null) {
_arguments = route.settings.arguments as Map?;
}
push相关方法返回Future类型,可以使用await等待返回结果。
第二个页面
Navigator.pop(context, "hello 返回");
第一个页面
onPressed: () async {
var result = await Navigator.pushNamed(context, "/second_page");
print(result);
},
Navigator.pushNamed(context, "/second_page")
.then((value) => {print(value)});
在使用命名路由跳转时,如果路由注册表没有注册,这时会调用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();
});
}
},
);
}
}
推荐使用命名路由,理由如下:
onGenerateRoute
回调。