Skip to content

Commit c1d9047

Browse files
AweiLoveAndroidAweiLoveAndroid
committed
update
1 parent 5245576 commit c1d9047

File tree

12 files changed

+373
-6
lines changed

12 files changed

+373
-6
lines changed

‎projects/flutter-demo/lib/all_samples/router/readme.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# 路由使用Demo
2+
3+
4+
5+
> **router_easy_sample** 这个是路由的简单实用。只需要运行`router_demo.dart`即可打开其他4个页面。
6+
7+
8+
9+
> **router_all_sample** 这个是路由的完整使用示例。这个是**公众号Flutter那些事**文章的完整示例。建议看这个。每一个dart文件都是可以单独运行的。
10+
11+
12+

‎projects/flutter-demo/lib/all_samples/router/router_all_sample/router_sample1.dart

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import 'package:flutter/material.dart';
2+
3+
// 使用Navigator.push实现发送路由，Navigator.pop返回上一个页面。
4+
void main() {
5+
runApp(
6+
new MaterialApp(
7+
title: 'Flutter 路由Demo',
8+
theme: new ThemeData(primarySwatch: Colors.blue),
9+
home: new MyHomePage(),
10+
),
11+
);
12+
}
13+
14+
class MyHomePage extends StatelessWidget {
15+
@override
16+
Widget build(BuildContext context) {
17+
return new Scaffold(
18+
appBar: new AppBar(title: new Text('Flutter 路由Demo')),
19+
body: new RaisedButton(
20+
color: Colors.teal,
21+
onPressed: () {
22+
Navigator.push(
23+
context,
24+
new MaterialPageRoute(
25+
builder: (context) => new MyApp(),
26+
),
27+
);
28+
},
29+
child: new Text(
30+
'跳转到下一个页面',
31+
),
32+
),
33+
);
34+
}
35+
}
36+
37+
class MyApp extends StatelessWidget {
38+
@override
39+
Widget build(BuildContext context) {
40+
return new Scaffold(
41+
appBar: new AppBar(
42+
title: new Text('Flutter 路由Demo'),
43+
),
44+
body: new RaisedButton(
45+
onPressed: () {
46+
Navigator.pop(context);
47+
},
48+
child: new Text('返回上一个页面'),
49+
),
50+
);
51+
}
52+
}

‎projects/flutter-demo/lib/all_samples/router/router_all_sample/router_sample2.dart

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import 'package:flutter/material.dart';
2+
3+
// 使用命名路由进行导航
4+
void main() {
5+
runApp(
6+
new MaterialApp(
7+
title: 'Flutter 路由Demo',
8+
theme: new ThemeData(primarySwatch: Colors.blue),
9+
home: new MyHomePage(),
10+
initialRoute: '/page_one',
11+
routes: {
12+
'/page_one': (context) => new MyHomePage(),
13+
'/jump_page_two': (context) => new MyApp(),
14+
},
15+
),
16+
);
17+
}
18+
19+
class MyHomePage extends StatelessWidget {
20+
@override
21+
Widget build(BuildContext context) {
22+
return new Scaffold(
23+
appBar: new AppBar(title: new Text('Flutter 路由Demo')),
24+
body: new RaisedButton(
25+
color: Colors.teal,
26+
onPressed: () {
27+
Navigator.pushNamed(context, '/jump_page_two');
28+
},
29+
child: new Text(
30+
'跳转到下一个页面',
31+
),
32+
),
33+
);
34+
}
35+
}
36+
37+
class MyApp extends StatelessWidget {
38+
@override
39+
Widget build(BuildContext context) {
40+
return new Scaffold(
41+
appBar: new AppBar(
42+
title: new Text('Flutter 路由Demo'),
43+
),
44+
body: new RaisedButton(
45+
onPressed: () {
46+
Navigator.pop(context);
47+
},
48+
child: new Text('返回上一个页面'),
49+
),
50+
);
51+
}
52+
}

‎projects/flutter-demo/lib/all_samples/router/router_all_sample/router_sample3.dart

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import 'package:flutter/material.dart';
2+
3+
// 通过路由将数据传递给另一个页面
4+
void main() {
5+
runApp(
6+
new MaterialApp(
7+
title: 'Flutter 路由Demo',
8+
theme: new ThemeData(primarySwatch: Colors.blue),
9+
home: new MyHomePage(),
10+
),
11+
);
12+
}
13+
14+
class MyHomePage extends StatelessWidget {
15+
final List<String> datas = ["橘子", "苹果", "香蕉", "柚子"];
16+
17+
@override
18+
Widget build(BuildContext context) {
19+
return new Scaffold(
20+
appBar: new AppBar(title: new Text('Flutter 路由Demo')),
21+
body: new RaisedButton(
22+
color: Colors.teal,
23+
onPressed: () {
24+
Navigator.push(
25+
context,
26+
MaterialPageRoute(
27+
// 路由跳转 并向新页面传递数组
28+
builder: (context) => MyApp(data: datas),
29+
),
30+
);
31+
},
32+
child: new Text(
33+
'跳转到下一个页面',
34+
),
35+
),
36+
);
37+
}
38+
}
39+
40+
class MyApp extends StatelessWidget {
41+
final List<String> data;
42+
43+
MyApp({Key key, @required this.data}) : super(key: key);
44+
45+
@override
46+
Widget build(BuildContext context) {
47+
String tempData = "";
48+
49+
data.forEach((String data) {
50+
tempData += data;
51+
});
52+
53+
return new Scaffold(
54+
appBar: new AppBar(
55+
title: new Text(tempData),
56+
),
57+
body: new RaisedButton(
58+
onPressed: () {
59+
Navigator.pop(context);
60+
},
61+
child: new Text('返回上一个页面'),
62+
),
63+
);
64+
}
65+
}

‎projects/flutter-demo/lib/all_samples/router/router_all_sample/router_sample4.dart

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import 'package:flutter/material.dart';
2+
3+
// 发送路由，并接收从其他页面返回数据
4+
void main() {
5+
runApp(
6+
MaterialApp(
7+
title: 'Flutter发送路由并返回数据Demo',
8+
home: HomePage(),
9+
),
10+
);
11+
}
12+
13+
// 页面A
14+
class HomePage extends StatelessWidget {
15+
@override
16+
Widget build(BuildContext context) {
17+
return Scaffold(
18+
appBar: AppBar(
19+
title: Text(
20+
'Flutter发送路由并返回数据Demo',
21+
style: new TextStyle(fontSize: 15),
22+
),
23+
),
24+
body: new MyHomePage(),
25+
);
26+
}
27+
}
28+
29+
class MyHomePage extends StatelessWidget {
30+
@override
31+
Widget build(BuildContext context) {
32+
return RaisedButton(
33+
color: Colors.teal,
34+
onPressed: () {
35+
_navigateAndDisplaySelection(context);
36+
},
37+
child: Text('跳转到下一个页面'),
38+
);
39+
}
40+
41+
// 封装函数用来发送路由和接收路由返回的数据
42+
_navigateAndDisplaySelection(BuildContext context) async {
43+
// 获取路由返回的数据
44+
final result = await Navigator.push(
45+
context,
46+
// 通过路由把数据发给另一个页面
47+
MaterialPageRoute(builder: (context) => MyApp()),
48+
);
49+
50+
// 把收到的数据用SnackBar显示出来
51+
Scaffold.of(context).showSnackBar(SnackBar(content: Text("$result")));
52+
}
53+
}
54+
55+
// 页面B
56+
class MyApp extends StatelessWidget {
57+
@override
58+
Widget build(BuildContext context) {
59+
return Scaffold(
60+
appBar: AppBar(
61+
title: Text(
62+
"页面2",
63+
style: new TextStyle(fontSize: 15),
64+
),
65+
),
66+
body: new RaisedButton(
67+
onPressed: () {
68+
Navigator.pop(context, '这是页面B给页面A发的数据');
69+
},
70+
child: Text('点击返回到页面A'),
71+
),
72+
);
73+
}
74+
}

‎projects/flutter-demo/lib/all_samples/router/router_all_sample/router_sample5.dart

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import 'package:flutter/material.dart';
2+
3+
// 发送路由并接收返回的数据
4+
void main() {
5+
runApp(
6+
MaterialApp(
7+
title: 'Flutter发送路由并返回数据Demo',
8+
home: HomePage(),
9+
),
10+
);
11+
}
12+
13+
// 页面A
14+
// 我们去掉MyHomePage 直接在body属性里面声明具体组件，看看效果
15+
class HomePage extends StatelessWidget {
16+
// 要发送出去的数据源
17+
final List<String> datas = ["橘子", "苹果", "香蕉", "柚子"];
18+
19+
@override
20+
Widget build(BuildContext context) {
21+
return Scaffold(
22+
appBar: AppBar(
23+
title: Text(
24+
'Flutter发送路由并返回数据Demo',
25+
style: new TextStyle(fontSize: 15),
26+
),
27+
),
28+
body: new RaisedButton(
29+
color: Colors.teal,
30+
onPressed: () {
31+
_navigateAndDisplaySelection(context);
32+
},
33+
child: Text('跳转到下一个页面'),
34+
),
35+
);
36+
}
37+
38+
// 封装函数用来发送路由和接收路由返回的数据
39+
_navigateAndDisplaySelection(BuildContext context) async {
40+
// 获取路由返回的数据
41+
final result = await Navigator.push(
42+
context,
43+
// 通过路由把数据发给另一个页面
44+
MaterialPageRoute(builder: (context) => MyApp(data: datas)),
45+
);
46+
47+
// 把收到的数据用SnackBar显示出来
48+
Scaffold.of(context).showSnackBar(SnackBar(content: Text("$result")));
49+
}
50+
}
51+
52+
// 页面A
53+
//class MyHomePage extends StatelessWidget {
54+
// // 要发送出去的数据源
55+
// final List<String> datas = ["橘子", "苹果", "香蕉", "柚子"];
56+
//
57+
// @override
58+
// Widget build(BuildContext context) {
59+
// return RaisedButton(
60+
// color: Colors.teal,
61+
// onPressed: () {
62+
// _navigateAndDisplaySelection(context);
63+
// },
64+
// child: Text('跳转到下一个页面'),
65+
// );
66+
// }
67+
//
68+
// // 封装函数用来发送路由和接收路由返回的数据
69+
// _navigateAndDisplaySelection(BuildContext context) async {
70+
// // 获取路由返回的数据
71+
// final result = await Navigator.push(
72+
// context,
73+
// // 通过路由把数据发给另一个页面
74+
// MaterialPageRoute(builder: (context) => MyApp(data: datas)),
75+
// );
76+
//
77+
// // 把收到的数据用SnackBar显示出来
78+
// Scaffold.of(context).showSnackBar(SnackBar(content: Text("$result")));
79+
// }
80+
//}
81+
82+
// 页面B
83+
class MyApp extends StatelessWidget {
84+
final List<String> data;
85+
86+
MyApp({Key key, @required this.data}) : super(key: key);
87+
88+
@override
89+
Widget build(BuildContext context) {
90+
String tempData = "";
91+
92+
data.forEach((String data) {
93+
tempData += data;
94+
});
95+
96+
return Scaffold(
97+
appBar: AppBar(
98+
title: Text(
99+
"来自于页面A的数据：$tempData",
100+
style: new TextStyle(fontSize: 15),
101+
),
102+
),
103+
body: new RaisedButton(
104+
onPressed: () {
105+
Navigator.pop(context, 'Tips：页面B返回的数据');
106+
},
107+
child: Text('点击返回并传递数据给页面A'),
108+
),
109+
);
110+
}
111+
}

‎projects/flutter-demo/lib/all_samples/router/demo1.dart renamed to ‎projects/flutter-demo/lib/all_samples/router/router_easy_sample/demo1.dart

File renamed without changes.

‎projects/flutter-demo/lib/all_samples/router/demo2.dart renamed to ‎projects/flutter-demo/lib/all_samples/router/router_easy_sample/demo2.dart

File renamed without changes.

‎projects/flutter-demo/lib/all_samples/router/demo3.dart renamed to ‎projects/flutter-demo/lib/all_samples/router/router_easy_sample/demo3.dart

File renamed without changes.

‎projects/flutter-demo/lib/all_samples/router/demo4.dart renamed to ‎projects/flutter-demo/lib/all_samples/router/router_easy_sample/demo4.dart

File renamed without changes.

‎projects/flutter-demo/lib/all_samples/router/router_demo.dart renamed to ‎projects/flutter-demo/lib/all_samples/router/router_easy_sample/router_demo.dart

File renamed without changes.

‎projects/flutter-demo/lib/readme.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22

33
### 1、`all_samples`是一个小项目，选中`main_page`，只要右键选择`run`，就可以运行这个小项目了。
44

5-
```
6-
打开`main_page` 是 首页，点击它里面的3个按钮，分别跳到`normal_page`页面，`router`目录，`list`目录：
75

8-
normal_page 是创建工程时的默认页面
9-
list 表示ListView的各种用法的demo。
10-
router 是 路由的使用demo，主要演示页面如何跳转和返回。
11-
```
6+
7+
打开`all_samples/main_page` 是首页，点击它里面的3个按钮，分别跳到`normal_page`页面，`router`目录，`list`目录：
8+
9+
`normal_page.dart` 是创建Flutter工程时自动创建的页面，我只是改了一个名字。
10+
`all_samples/list` 这个文件夹 表示ListView的各种用法的demo。
11+
`all_samples/router` 这个文件夹是 路由的使用demo，主要演示页面如何跳转和返回。
12+
1213

1314
### 2、其他的Dart文件基本都是一些控件的使用，想看哪个效果，右键`run`就可以运行了，后期会逐渐整理到`all_samples`目录里面。

0 commit comments

Comments
 (0)