Flutter的路由使用有两种方式,分别是新建路由和注册路由。
新建路由
- 代码如下:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: "Welcome to Flutter",
home: FirstPage(),
);
}
}
/// 第一个页面
class FirstPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("第一页"),
),
body: Padding(
padding: EdgeInsets.all(30.0),
child: RaisedButton(
child: Text('跳转到第二页'),
onPressed: (){
Navigator.push(//在路由栈添加路由
context,
MaterialPageRoute(builder: (context) => SecondPage())
);
},
),
),
);
}
}
///第二个页面
class SecondPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("第二页"),
),
body: Padding(
padding: EdgeInsets.all(30.0),
child: RaisedButton(
child: Text("回到第一页"),
onPressed: (){//在路由栈移除路由
Navigator.pop(context);
},
),
),
);
}
}
注册路由
它以堆叠的方式,叠加页面。因此,在返回第一个页面的时候,需要从栈中销毁第二个页面,否则,会再次堆叠一个新的页面,就像Web前端的页面一样。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: "Welcome to Flutter",
home: FirstPage(),
routes: <String, WidgetBuilder>{
'/first':(BuildContext context) => FirstPage(),
'/second':(BuildContext context) => SecondPage(),
},
initialRoute: 'first',
);
}
}
/// 第一个页面
class FirstPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("第一页"),
),
body: Padding(
padding: EdgeInsets.all(30.0),
child: RaisedButton(
child: Text('跳转到第二页'),
onPressed: (){
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}
///第二个页面
class SecondPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("第二页"),
),
body: Padding(
padding: EdgeInsets.all(30.0),
child: RaisedButton(
child: Text("回到第一页"),
onPressed: (){
Navigator.of(context).pop();
},
),
),
);
}
}