flutter 页面导航和返回

记录一下自己的学习过程~

一般页面导航和返回

导航的使用在任何程序里都至关重要，这也是一个程序的灵魂。
ElevatedButton 按钮控件
它有两个最基本的属性：

child：可以放入容器，图标，文字。让你构建多彩的按钮。
onPressed：点击事件的相应，一般会调用Navigator控件。
我们在作页面导航时，大量的使用了ElevatedButton控件，这个控件的使用在实际工作中用的也比较多。

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:ElevatedButton(
          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('YoYo商品详情页')),
      body:Center(child:ElevatedButton(
        onPressed: () {
     },
        child:ElevatedButton(
          child:Text('返回'),
          onPressed: (){
   
            Navigator.pop(context);
          },
        )
      ))
    );

  }
}

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

导航参数的传递和接收（1）

页面跳转的时候参数的传递和接受。

这个挑选商品的过程就是参数的传递和接受，用在程序上解释就是比如你进入一个商品选择列表，当你想选择一个商品的具体信息的时候，你就要传递商品编号，详细页面接受到编号后，显示出不同的内容。

Awesome Flutter snippets组件的使用

因为我们的代码有些多，这时候我们要加快敲代码的速度，可以使用VSCode 中的Awesome Flutter snippets插件。它可以帮忙我们快速生成常用的Flutter代码片段。

比如输入stlss就会给我们生成如下代码：

class name extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return Container(
      child: child,
    );
  }
}

安装完成后，我们可以看这个插件的说明，可以快速生成很多代码片段，小伙伴们可以自己测试。熟练掌握后，能大大加快我们的代码编写速度。

声明数据结构类

Dart中可以使用类来抽象一个数据，比如我们模仿一个商品信息，有商品标题和商品描述。我们定义了一个Product类，里边有两个字符型变量，title和description。

title:是商品标题。
description: 商品详情描述
代码如下:

class Product{
   
  final String title;  //商品标题
  final String description;  //商品描述
  Product(this.title,this.description);
}

构建一个商品列表
作一个商品的列表，这里我们采用动态的构造方法，在主方法里传递一个商品列表（List）到自定义的Widget中。

先来看看主方法的编写代码:

void main(){
   
  runApp(MaterialApp(
    title:'数据传递案例',
    home:ProductList(
      products:List.generate(