Named Routes
語法
1
2
3
4
5
6
MaterialApp(
initialRoute: "/list", // 首頁
routes: {
"/list": (context) => ListPage(), // 清單頁
"/detail": (context) => DetailPage(), // 詳細頁
});
導至其它頁面
Navigator.pushNamed(context, "/detail");
完整程式碼
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: "/list",
routes: {
"/list": (context) => ListPage(),
"/detail": (context) => DetailPage(),
});
}
}
class ListPage extends StatefulWidget {
ListPage({Key? key}) : super(key: key);
@override
_ListPageState createState() => _ListPageState();
}
class _ListPageState extends State<ListPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List Page'),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.pushNamed(context, "/detail");
},
child: Container(
color: Colors.blue,
margin: EdgeInsets.only(top: 10),
height: 80,
alignment: Alignment.center,
child: Text('item $index',
style: TextStyle(color: Colors.white, fontSize: 20)),
),
);
},
),
);
}
}
class DetailPage extends StatefulWidget {
DetailPage({Key? key}) : super(key: key);
@override
_DetailPageState createState() => _DetailPageState();
}
class _DetailPageState extends State<DetailPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Detail Page'),
),
body: Center(
child: TextButton(
onPressed: () {
Navigator.pushNamed(context, "/list");
},
child: Text('Back'),
),
),
);
}
}
傳遞參數
Navigator.pushNamed(context, route, arguments: 參數);
Navigator.pushNamed(context, "/detail", arguments: {"id": index});
接收參數
接收參數要在initState()方法接收，並且要使用Future.microtask()來接收參數。
@override
void initState() {
Future.microtask(() {
// 接收參數
});
}
接收參數語法
變數 = ModalRoute.of(context)!.settings.arguments;
1
2
3
4
5
6
7
8
9
@override
void initState() {
super.initState();
Future.microtask(() {
Map<String, dynamic> args =
ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
print(args["id"]);
});
}
完整程式碼
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(initialRoute: "/list", routes: {
"/list": (context) => ListPage(),
"/detail": (context) => DetailPage(),
});
}
}
class ListPage extends StatefulWidget {
ListPage({Key? key}) : super(key: key);
@override
_ListPageState createState() => _ListPageState();
}
class _ListPageState extends State<ListPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List Page'),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.pushNamed(context, "/detail", arguments: {"id": index});
},
child: Container(
color: Colors.blue,
margin: EdgeInsets.only(top: 10),
height: 80,
alignment: Alignment.center,
child: Text('item $index',
style: TextStyle(color: Colors.white, fontSize: 20)),
),
);
},
),
);
}
}
class DetailPage extends StatefulWidget {
DetailPage({Key? key}) : super(key: key);
@override
_DetailPageState createState() => _DetailPageState();
}
class _DetailPageState extends State<DetailPage> {
int? _id;
@override
void initState() {
super.initState();
Future.microtask(() {
Map<String, dynamic> args =
ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
// 參數設定在變數中
_id = args["id"] as int?;
// 更新變數
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Detail Page'),
),
body: Center(
child: TextButton(
onPressed: () {
Navigator.pushNamed(context, "/list");
},
child: Text('item index = $_id, Back to List Page'),
),
),
);
}
}