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: [
            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);//返回上一个路由
        },
      ),
    );
  }
}

运行结果:
flutter学习——路由(routes)_第1张图片
flutter学习——路由(routes)_第2张图片

在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,
        )
    );
  }
}

你可能感兴趣的:(flutter学习——路由(routes))