在flutter中我们要打开新的一个页面需要使用Navigator这个类,相当于startActivity。要知道activiy要进行跳转是要在注册文件(AndroidManifest.xml)中注册,而在flutter中也是一样要注册。
在flutter入口main函数中,调用的runApp初始化时进行路由注册。
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
"/": (context) => MyHomePage(title: 'Is Flutter Demo Page'),
"/jumpFirst": (context) => JumpFirstPage(),
"/jumpSecond": (context) => JumpSecondPage(),
},
);
}
}
在路由注册中"/"代表的是我们的第一个启动的页面,相当于Android注册文件中的
我们要跳转到新的页面时,直接使用
Navigator.pushNamed(context, "/jumpFirst");
pushNamed中的第二个参数就是我们自己注册的句柄
跳转携带参数
1、静态携带参数,直接在路由中写死
"/": (context) => MyHomePage(title: 'Is Flutter Demo Page'),
2、通过路由配置,携带参数。在Navigator跳转中有个一个Object arguments参数,通过这个参数可以传递我们需要的数据。
@optionalTypeArgs
static Future pushNamed(
BuildContext context,
String routeName, {
Object arguments,
}) {
return Navigator.of(context).pushNamed(routeName, arguments: arguments);
}
页面通过arguments获取携带的参数
Navigator.pushNamed(context, "/jumpSecond",arguments:{"paramName":"paramValue"});
配置统一路由出口
1、创建统一路由注册配置文件
class Routes {
static final routerMapConfig = {
"/": (context, {arguments}) => MyHomePage(title: 'Is Flutter Demo Page'),
"/jumpFirst": (context, {arguments}) => JumpFirstPage(),
"/jumpSecond": (context, {arguments}) => JumpSecondPage(arguments:arguments),
};
// ignore: top_level_function_literal_block
static final onGenerateRoute = (RouteSettings settings) {
var pageBuilder = routerMapConfig[settings.name];
if (pageBuilder != null) {
if (settings.arguments != null) {
return MaterialPageRoute(
builder: (context) =>
pageBuilder(context, arguments: settings.arguments));
} else {
return MaterialPageRoute(builder: (context) => pageBuilder(context));
}
}
throw new Exception("路由["+settings.name+"]页面没有注册,请先注册");
};
}
2、在入口main配置路由,onGenerateRoute路由配置,initialRoute是默认启动的路由。
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: "/",
onGenerateRoute: Routes.onGenerateRoute,
);
}
3、在页面获取参数
class JumpSecondPage extends StatefulWidget {
final Map arguments;
final Key key;
JumpSecondPage({this.key,this.arguments}):super(key: key);
@override
_JumpSecondPageState createState() => _JumpSecondPageState(arguments: arguments);
}
class _JumpSecondPageState extends State {
final Map arguments;
_JumpSecondPageState({this.arguments}){
if(arguments == null){
print("没有携带参数过来");
}else{
print("传递过来的参数 "+arguments["paramName"]);
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: Text("跳转的第二个页面"),),
body: Center(
child: GestureDetector(
child: Text("最后一个页面要结束"),
onTap: (){
//TODO click operation
Navigator.pop(context);
},
),
),
);
}
}
返回数据给上一个页面
1、在pop中直接添加要返回的数据
Navigator.pop(context,"返回给上一个页面的数据");
2、接收的页面使用then接收返回的数据,then相当于onActivityForResult
Navigator.of(context).pushReplacementNamed("/jumpSecond",
arguments: {
"name": "参数内容"
}).then((value) => print("返回的数据=" + value));