学习资料:Flutter移动应用
展示内容的屏幕或页面叫做路由(routes), Navigator这个小部件提供了方法可以去管理这些路由,比如Navigator.push、Navigator.pop,路由对象都会放在一个Stack里面。我们可以自己创建一个Navigator去处理路由堆,也可以使用WigetsApp或者是MaterialApp小部件给我们创建好的Navigator,使用Navigator.of这个方法,把context交给它就可以了,这样就可以实现push和pop。
在main.dart的App()的MaterialApp里面,有个home属性值,它展示的页面就是在路由堆中是最底下的路由,即一开始就会显示的页面。当新的路由push到这个路由堆的上面,屏幕上就会显示新push的页面。
一个例子 :
在main.dart中修改的home值
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: NavigatorDemo(),
theme:ThemeData(
primarySwatch: Colors.deepPurple,
highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70,
)
);
}
}
新建一个navigator_demo.dart,使用Navigator.of(context).push()
class NavigatorDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
child: Text('Home'),
onPressed: null,
),
FlatButton(
child: Text('About'),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) => MyPage(title: 'About'),
),
);
Navigator.pushNamed(context, '/about');
},
),
],
),
),
);
}
}
class MyPage extends StatelessWidget{
final String title;
MyPage({
this.title
});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(title),
elevation: 0,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.arrow_back),
onPressed: (){
Navigator.pop(context);//返回上一个路由
},
),
);
}
}
在MaterialApp中我们事先定义好一些带名字的路由,然后想要push的时候只需要给出名字就行了。
在MaterialApp中添加routes属性,它里面是map,各自都有对应的名字和值(打开路由后要显示的东西),
例子:
class App extends StatelessWidget{
@override
Widget build(BuildContext context++) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: NavigatorDemo(),
routes: {//map
'/about':(context) => MyPage(title:'About'),
},
theme:ThemeData(
primarySwatch: Colors.deepPurple,
highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70,
)
);
}
}
class NavigatorDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
child: Text('Home'),
onPressed: null,
),
FlatButton(
child: Text('About'),
onPressed: (){
Navigator.pushNamed(context, '/about');
},
),
],
),
),
);
}
}
class MyPage extends StatelessWidget{
final String title;
MyPage({
this.title
});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(title),
elevation: 0,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.arrow_back),
onPressed: (){
Navigator.pop(context);
},
),
);
}
}
也可以不用Home属性,转而使用initialRoute来设置初始的路由,
class App extends StatelessWidget{
@override
Widget build(BuildContext context++) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
// home: NavigatorDemo(),
initialRoute: '/',
routes: {//map
'/':(context) => NavigatorDemo(),//初始路由
'/about':(context) => MyPage(title:'About'),
},
theme:ThemeData(
primarySwatch: Colors.deepPurple,
highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
splashColor: Colors.white70,
)
);
}
}