一：理解导航、页面切换

导航在手机应用中指的就是以页面为单位的切换。

语言	页面	切换方法
iOS	ViewController	pushViewController/popViewController
Android	Activity	startActivity()/finish()
Flutter	StatelessWidget	Navigator.push()/Navigator.pop()

当然iOS中还有presentViewController/dismissViewController,这种只是视图控制器的覆盖。假设每个App都是个大画板，navigation是将当前画板上的纸挪别的地方存起来，present是拿到另一张纸盖住。

navigation与present

二：Flutter中导航的问题

• 问：想要实现导航，就得知道flutter的页面是什么，如何创建页面？
• 答：右键在lib文件夹下新建与main.dart同级的dart文件，取名navigation。.dart类似iOS中的.m文件，Android中的.java。我理解的执行文件，在此文件中，我可以创建控件，执行方法等。其语法就是自己独有的Dart语言，后续慢慢学习。

---

• 问：类似iOS中的controller，Android的Activity，Flutter的页面是什么？
• 答：目前我只看到了StatelessWidget，继承他，就能将他的类认定为个页面。

---

• 问：跳转肯定需要触发事件，最简单的
• 答：目前我只看到了StatelessWidget，继承他，就能将他的类认定为个页面。

三：基础的导航切换

1. 新建navigation.dart，在其中敲入如下代码，一个页面就有了

// 导入相关头文件
import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      )
    );
  }
}

2.在main.dart 导入文件，找到工程初始化时生成的Text代码，在其下新生成个按钮

import 'navigation.dart';
 children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
             new MaterialButton(
                 color: Colors.blueGrey,     //背景颜色
                 textColor: Colors.white,    //字体颜色
                 child: new Text("Navigation"),       //字体名称
                 onPressed: (){                  //点击事件
                   Navigator.push(             //导航控件使用
                     context,
                     new MaterialPageRoute(builder: (context) => new FirstPage()),
                   );
                 })
          ]

3.我可以继续在navigation.dart中 添加页面，并加入相应的逻辑

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      ),
      body: new Center(
        child: new MaterialButton(child: new Text("下一页"), onPressed: () {
          Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondPage()));
        }),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Second Screen')
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('Go back!'),
          onPressed: (){
            Navigator.pop(context);  // 导航返回
          },
        ),
      ),
    );
  }
}

四：另外一种方式

1：在main.dart中提前生成需要跳转的页面(路由名构成的 Map)

import 'navigation.dart';
import 'home.dart';
class MyApp extends StatelessWidget {
  // This widget is the root of your application.-
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      routes: <String, WidgetBuilder> {
        '/first': (BuildContext context) => FirstPage(),
        '/second': (BuildContext context) => SecondPage(),
        '/third': (BuildContext context) => ThirdPage(),
       '/home': (BuildContext context) => HomePage(),    // 新建个home.dart 是真正的主页，作为其它控件学习的入口 
      },
       );
  }
}

2：跳转

 new MaterialButton(child: new Text("routes"), onPressed: (){
               Navigator.of(context).pushNamed('/first');
             })
// 真的主页 为了跳转入各个控件学习的过程
 new MaterialButton(color: Colors.blueGrey, child: new Text("真正的主页"), onPressed: (){
              Navigator.of(context).pushNamed('/home');
            }),

五：传值（待续）

现在只是学习基础知识，有问题或新的学习心得会继续补充......