flutter学习——路由（routes）

学习资料：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: <Widget>[
            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: <Widget>[
            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,
        )
    );
  }
}