一年前初学flutter，再次看以前知识有些生疏，当做笔记记之。
文章转载自CSDN
Navigator.push(context,new MaterialPageRoute(builder: (context) => new Second()));
- 在同一个 .dart 文件中，定义两个page页面
- 跳转到下一个页面：Navigator.push(context,new MaterialPageRoute(builder: (context) => new Second()));
- 返回上一个页面：Navigator.pop(context);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
/**
* 跳转到新页面并返回
*/
void main() {
runApp(new MaterialApp(
title: "Flutter",
home: new FirstScreen(),
));
}
/**
* 第一个页面
*/
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Flutter"),
),
body: new Center(
child: new RaisedButton(
child: new Text("登录"),
onPressed: () {
//跳转到新的 页面我们需要调用 navigator.push方法
Navigator.push(context,
new MaterialPageRoute(builder: (context) => new Second()));
}),
),
);
}
}
/**
* 第二个页面
*/
class Second extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Flutter"),
),
body: new Center(
//onPressed 点击事件
child: new RaisedButton(child: new Text("注销"), onPressed: () {
//回到上一个页面 该pop将Route从导航器管理的路由栈中移除当前路径
Navigator.pop(context);
}),
),
);
}
}
如果不在同一页面中使用时候，
1
2
Navigator.push(context,
new MaterialPageRoute(builder: (context) => new LoginPage()));
这个时候需要在当前页面 import 对应的LoginPage()那个页面。
Navigator.of(context).pushNamed(“/loginin”);
- 需要在 main.dart中进行添加key匹配，在别的页面才使用Navigator.of(context).pushNamed(“/loginin”);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import 'login_page.dart';
import 'newguide.dart';
import 'loginin_page.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// 定义路由
final Map<String, WidgetBuilder> routes = {
"/": (BuildContext context) => NewGuidePage(),
"/home": (BuildContext context) => HomePage(),
"/login": (BuildContext context) => LoginPage(),
"/loginin": (BuildContext context) => LogininPage(),
};
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tutorial',
theme: ThemeData(
primarySwatch: Colors.lightBlue,
fontFamily: 'Nunito',
),
debugShowCheckedModeBanner: false,
routes: routes,
initialRoute: '/',
);
}
}
命名路由
- 所谓命名路由（Named Route）即给路由起一个名字，然后可以通过路由名字直接打开新的路由。这为路由管理带来了一种直观、简单的方式。
路由表
- 要想使用命名路由，我们必须先提供并注册一个路由表（routing table），这样应用程序才知道哪个名称与哪个路由Widget对应。路由表的定义如下：
Map<String, WidgetBuilder> routes；
- 它是一个Map， key 为路由的名称，是个字符串；value是个builder回调函数，用于生成相应的路由Widget。我们在通过路由名称入栈新路由时，应用会根据路由名称在路由表中找到对应的WidgetBuilder回调函数，然后调用该回调函数生成路由widget并返回。
注册路由表
- 我们需要先注册路由表后，我们的Flutter应用才能正确处理命名路由的跳转。注册方式很简单，main.dart,在MyApp类的build方法中找到MaterialApp，添加routes属性，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
//注册路由表
routes:{
"new_page":(context)=>NewRoute(),
} ,
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
通过路由名打开新路由页
- 我们需要先注册路由表后，我们的Flutter应用才能正确处理命名路由的跳转。注册方式很简单，main.dart,在MyApp类的build方法中找到MaterialApp，添加routes属性，代码如下：
1
Future pushNamed(BuildContext context, String routeName)
资料
https://blog.csdn.net/yuezheyue123/article/details/84315157
