1、概述
管理多个页面时有两个核心概念和类:Route和 Navigator。 一个route是一个屏幕或页面的抽象,Navigator是管理route的Widget。Navigator可以通过route入栈和出栈来实现页面之间的跳转。
2、导航到新路由方法
a、Navigator.of(context).push(route)
b、Navigator.push(context,route)
//导航到新路由(通过路由名打开路由页并且携带参数)
Navigator.pushNamed(context, "home_page", arguments: "App首页");
如何接收参数?
import 'package:flutter/material.dart';
import 'package:flutter_app/demo/page/MinePage.dart';
import '../widget/WidgetCustom.dart';
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return HomePageState();
}
}
class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
//获取路由参数
var args=ModalRoute.of(context).settings.arguments;
return new Scaffold(
appBar: new AppBar(
title: new Text(args),
),
//整合
body: new ListView(
children: <Widget>[
//第5步:实现图像部分
new Image.asset('images/like4.jpg'),
],
),
);
}
}
3、注册路由
....
return MaterialApp(
title: "flutter",
//注册路由表
routes: {
"home_page":(context)=>HomePage(),
"main_page":(context)=>MainPage()//注册主页路由
},
},
home: MainPage(),
.....
4、设置启动页
....
return MaterialApp(
....
home: MainPage(),
.....
或
....
return MaterialApp(
initialRoute: "main_page",//名为“main_page”作为应用home 的首页
title: "flutter",
//注册路由表
routes: {
"home_page":(context)=>HomePage(),
"main_page":(context)=>MainPage()//注册主页路由
},
},
.....
5、路由跳转统一处理
//路由钩子 主要作用权限或者是否登录统一管理
onGenerateRoute: (RouteSettings settings){
return MaterialPageRoute(builder:(context){
String routeName=settings.name;
});
},
示例:
import 'package:flutter/material.dart';
import 'package:flutter_app/demo/page/HomePage.dart';
import 'MainPage.dart';
void main() => runApp(flutterApp());
class flutterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
initialRoute: "main_page",//名为“main_page”作为应用home 的首页
title: "flutter",
//注册路由表
routes: {
"home_page":(context)=>HomePage(),
"main_page":(context)=>MainPage()//注册主页路由
},
//路由钩子 主要作用权限或者是否登录统一管理
onGenerateRoute: (RouteSettings settings){
return MaterialPageRoute(builder:(context){
String routeName=settings.name;
});
},
);
}
}