Flutter 入门学习之配置路由

配置路由

404路由的配置

话不多说,直接贴代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// App 主界面
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
routes: {
// 配置初始界面的第一种方式
// '/': (BuildContext context) => MyHomePage(title: 'Flutter Demo Home Page'),
'/home': (BuildContext context) => MyHomePage(title: 'Flutter Demo Home Page'),
'/1': (BuildContext context) => FirstPage(),
},
// 配置初始界面的第一种方式
// home: MyHomePage(title: 'Flutter Demo Home Page'),
// 第三种方式
initialRoute: '/home',
// 配置错误路由(路由表中没有的)
onGenerateRoute: (RouteSettings settings){
return MaterialPageRoute(builder: (BuildContext context) => ErrorPage());
},
// ...
}

在 MyHomePage 内添加几个按钮:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
children: <Widget>[
Text(
'路由测试',
),
RaisedButton(
child: Text('打开首界面'),
onPressed: () {
Navigator.of(context).pushNamed('/1');
}),
RaisedButton(
child: Text('不存在界面'),
onPressed: () {
Navigator.of(context).pushNamed('/2');
})
],

路由观察者的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// App 主界面
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// ...
onGenerateRoute: (RouteSettings settings){
return MaterialPageRoute(builder: (BuildContext context) => ErrorPage());
},
// 配置路由观察者
navigatorObservers: [
MyNavigatorObserver(),
],

)
}
}

创建文件 my_navigator_observer.dart,观察者类需要继承自 NavigatorObserver,根据需求重写几个方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import 'package:flutter/material.dart';

class MyNavigatorObserver extends NavigatorObserver{
@override
void didPush(Route route, Route previousRoute) {

print("Push Route:" + route.settings.toString());
print("Push Route:" + route.settings.name.toString());

if(previousRoute!=null){
print("Push PreRoute:" + previousRoute.settings.toString());
print("Push PreRoute:" + previousRoute.settings.name.toString());
}
super.didPush(route, previousRoute);
}
@override
void didPop(Route route, Route previousRoute) {
// TODO: implement didPop
super.didPop(route, previousRoute);
}
}

在每次执行了 Push 方法时都会回调 didPush() 等方法。