Flutter免费视频第四季-页面导航和其他

到目前位置，作一个页面已经没有什么问题了，接下来需要学习一下页面间的跳转，学会了这一季内容，就可以从一个单页面的应用制作一个项目了。

不过提前跟小伙伴们说一下，其实这章也是有难度的，因为这跟前端的导航或者说超链接有所不同。如果你能有空杯心态，学习来会容易一点。

不过你不要害怕，其实也不难，大不了多练习几遍，熟练一下就好。

学习这个视频，你最好先把Flutter的前三季给看了，否则你可能看蒙圈。

• 第一季Flutter视频教程地址： http://jspang.com/post/flutter1.html

• 第二季Flutter视频教程地址： http://jspang.com/post/flutter2.html

• 第三季Flutter视频教程地址： http://jspang.com/post/flutter3.html

第01节：一般页面导航和返回

导航的使用在任何程序里都至关重要，这也是一个程序的灵魂。那这节我们就开始学习导航的知识。

RaisedButton按钮组件

它有两个最基本的属性：

Navigator

我们在作页面导航时，大量的使用了 RaisedButton 组件，这个组件的使用在实际工作中用的也比较多。

Navigator.push 和 Navigator.pop

• Navigator.push ：是跳转到下一个页面，它要接受两个参数一个是上下文 context ，另一个是要跳转的函数。

• Navigator.pop ：是返回到上一个页面，使用时传递一个context（上下文）参数，使用时要注意的是，你必须是有上级页面的，也就是说上级页面使用了 Navigator.push 。

写一个Demo

我们现在就来作一个简单的案例，我们打开一个页面，页面上只有一个简单的按钮，按钮写着“查看商品详情页面”，然后点击后进入下一个页面，页面有一个按钮，可以直接返回。

代码如下，一定要动手敲一敲哦。

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title:'导航演示1',
    home:new FirstScreen()
  ));
}

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: AppBar(title:Text('导航页面')),
      body:Center(
        child:RaisedButton(
          child:Text('查看商品详情页面'),
          onPressed: (){
            Navigator.push(context,new  MaterialPageRoute(
              builder:(context) =>new SecondScreen())
            );
          },
        )
      )
    );
  }
}

class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar:AppBar(title:Text('技术胖商品详情页')),
      body:Center(child:RaisedButton(
        child:RaisedButton(
          child:Text('返回'),
          onPressed: (){
            Navigator.pop(context);
          },
        )
      ))
    );

  }
}

填坑，如果是1.0以下版本，热更新的时候会有时不能实现导航，这个需要你重新启动一下虚拟机。