布局练习的差不多 接下来就要学习路由啦
那么如何创建和使用路由和导航呢？
首先在 MaterialApp 注册 routes
'ful' => 路由的名称
(BuildContext context) => StatefulGroup() => 路由指向的页面
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
| e.g.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'statefulGroup',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('如何创建和使用路由和导航？'),
),
body: RouteNavigator(),
),
routes: <String, WidgetBuilder>{
'ful': (BuildContext context) => StatefulGroup(),
'layout': (BuildContext context) => LayoutDemo(),
},
);
}
|
然后写一个路由跳转的方法
有两种路由跳转的方式 所以使用 SwitchListTile 来切换
SwitchListTile是一个 带标签的开关 的控件
其属性如下：
value： 是否选中 是否打开
onChanged： 当打开关闭的时候的回调
activeColor： 选中时 滑块的颜色
activeTrackColor： 选中时 滑道的颜色
inactiveThumbColor： 未选中时 滑块的颜色
inactiveTrackColor： 未选中时 滑道的颜色
activeThumbImage： 选中时 滑块的图片
inactiveThumbImage： 未选中时 滑块的图片
title： 标题 典型的是 Text
subtitle： 副标题 在标题下面的 典型的是 Text
isThreeLine = false： 是不是三行， true 时： subtitle 不能为null， false时可以为 null
dense： 是否垂直密集居中
secondary： 左边的一个东西
selected = false： 如果为 true ，则 text 和 icon 都用 activeColor 时的color
路由的两种跳转方式
通过路由名字跳转
Navigator.pushNamed(context, routeName)
Navigator.push(context, MaterialPageRoute(builder: (context) => page))
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
| e.g.
class RouteNavigator extends StatefulWidget {
_RouteNavigatorState createState() => _RouteNavigatorState();
}
class _RouteNavigatorState extends State<RouteNavigator> {
bool byName = false;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
SwitchListTile(
title: Text('${byName ? '' : '不'}通过路由名称跳转'),
value: byName,
onChanged: (value) {
setState(() {
byName = value;
});
},
),
_item('statefulWidget和基础组件', StatefulGroup(), 'ful'),
_item('布局篇', LayoutDemo(), 'layout'),
],
),
);
}
_item(String title, page, String routeName) {
return Container(
alignment: Alignment.center,
child: RaisedButton(
onPressed: () {
if (byName) {
Navigator.pushNamed(context, routeName);
} else {
Navigator.push(
context, MaterialPageRoute(builder: (context) => page));
}
},
child: Text(title),
),
);
}
}
|
这样就能点击按钮跳转了
那么如何返回呢？
界面返回
在所需要的跳转的界面的 appBar 中添加返回按钮
Navigator.push 页面进入
Navigator.pop 页面弹出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| e.g.
home: Scaffold(
appBar: AppBar(
title: Text('stateful 基础组件'),
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back),
),
)
)
|
